feat: Add tool calling component

Author: shaohuzhang1

ui/src/components/markdown/MdRenderer.vue

@@ -38,7 +38,7 @@ import EchartsRander from './EchartsRander.vue'
 import FormRander from './FormRander.vue'
 import ReasoningRander from './ReasoningRander.vue'
 import IframeRender from './IframeRender.vue'
-
+import ToolCallsRender from './tool-calls-render/index.vue'
 config({
   markdownItConfig(md) {
     md.renderer.rules.image = (tokens, idx, options) => {
@@ -87,6 +87,7 @@ const TAG_PLUGINS: TagPlugin[] = [
   { tag: 'quick_question', type: 'question' },
   { tag: 'html_rander', type: 'html_rander' },
   { tag: 'iframe_render', type: 'iframe_render' },
+  { tag: 'tool_calls_render', type: 'tool_calls_render' },
   {
     tag: 'echarts_rander',
     type: 'echarts_rander',
@@ -192,6 +193,7 @@ const componentMap: Record<string, any> = {
   echarts_rander: EchartsRander,
   form_rander: FormRander,
   iframe_render: IframeRender,
+  tool_calls_render: ToolCallsRender,
 }
 
 function getComponentProps(item: RenderNode) {
@@ -208,11 +210,12 @@ function getComponentProps(item: RenderNode) {
 
     case 'echarts_rander':
       return { option: item.content }
-
     case 'html_rander':
       return { source: item.content }
     case 'iframe_render':
       return { source: item.content }
+    case 'tool_calls_render':
+      return { content: item.content }
 
     default:
       return {}

ui/src/components/markdown/tool-calls-render/content/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <component :is="kw[content.type]" :content="content"></component>
+</template>
+<script setup lang="ts">
+import SimpleToolCalls from './simple-tool-calls/index.vue'
+import { type ToolCalls } from '@/components/markdown/tool-calls-render/index'
+defineProps<{
+  content: ToolCalls
+}>()
+const kw: any = {
+  'simple-tool-calls': SimpleToolCalls,
+}
+</script>
+<style lang="scss" scoped></style>

ui/src/components/markdown/tool-calls-render/content/simple-tool-calls/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <el-card>
+    {{ content.content.input }}
+  </el-card>
+  <el-card>
+    {{ content.content.output }}
+  </el-card>
+</template>
+<script setup lang="ts">
+import { type ToolCalls } from '@/components/markdown/tool-calls-render/index'
+defineProps<{
+  content: ToolCalls
+}>()
+</script>
+<style lang="scss" scoped></style>

ui/src/components/markdown/tool-calls-render/index.ts

@@ -0,0 +1,6 @@
+export interface ToolCalls {
+  type: string
+  icon?: string
+  title: string
+  content: any
+}

ui/src/components/markdown/tool-calls-render/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-collapse>
+    <el-collapse-item title="Consistency">
+      <template #title>
+        <div class="flex" style="flex-wrap: nowrap; align-items: center">
+          <el-avatar class="avatar-gradient mr-8" style="height: 20px; width: 20px" shape="square">
+            <img :src="toolCallsContent.icon || defaultIcon" /> </el-avatar
+          >工具执行
+        </div>
+      </template>
+      <Content :content="toolCallsContent"></Content>
+    </el-collapse-item>
+  </el-collapse>
+</template>
+<script lang="ts" setup>
+import Content from './content/index.vue'
+import { ref, computed } from 'vue'
+import { type ToolCalls } from './index'
+import defaultIcon from '@/assets/workflow/icon_robot.svg'
+const props = defineProps<{ content?: string }>()
+
+const toolCallsContent = computed<ToolCalls>(() => {
+  try {
+    return JSON.parse(props.content ? props.content : '{}')
+  } catch (error) {
+    return { type: 'simple-tool-calls', icon: '', title: '', content: {} }
+  }
+})
+</script>
+<style lang="scss" scoped></style>