Skip to content

feat: Add tool calling component #4830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shaohuzhang1 merged 1 commit into from
Feb 28, 2026
+70 −2
Merged

feat: Add tool calling component #4830

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions ui/src/components/markdown/MdRenderer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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) {
Expand All @@ -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 {}
Expand Down
14 changes: 14 additions & 0 deletions ui/src/components/markdown/tool-calls-render/content/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Feb 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided Vue component template appears to be valid and functional. However, here are a few minor improvements or optimizations you might consider:

  1. Type Annotations: Ensure that the props definition is properly typed with TypeScript. Currently, content.type is expected to be of a string type (as specified in ToolCalls), but TypeScript does not enforce this. Adding an explicit return type can improve clarity.

  2. Optional Prop Types: If it's possible that content.type could be undefined or null, you should define optional types.

  3. Conditional Rendering: Consider adding some conditional rendering if necessary to handle different types gracefully, especially if there are more components you expect to render.

  4. Use of v-bind: The colon : is often used for data binding, and while <component> allows you to bind to dynamic values like strings (:'some-component'), using v-bind explicitly is generally recommended for clarity.

Here's the revised code with these considerations:

@@ -0,0 +1,21 @@
<template>
  <component :is="getComponent(content)" :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'

// Type annotations for props
defineProps<{
  content: ToolCalls,
}>();

const getComponent = (content: ToolCalls): string => {
  return kw[content.type] ? kw[content.type].name : '';
};

const kw: { [key: string]: any } = {
  'simple-tool-calls': SimpleToolCalls,
};
</script>

<style lang="scss" scoped></style>

In this adjusted version:

  • A conditional function getComponent is used to ensure we only attempt to use known keys.
  • Optional typing for the content prop is implied by defaulting its value to {}.
  • Conditional checks help avoid runtime errors when accessing unknown component names in the dictionary.

15 changes: 15 additions & 0 deletions ui/src/components/markdown/tool-calls-render/content/simple-tool-calls/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Feb 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided Vue.js component looks mostly clean and follows best practices. However, there are a few minor things that can be improved:

  1. TypeScript Prop Check: Since content is an array of objects (ToolCalls[]), it would make more sense to use this instead of just ToolCalls.
  2. Card Titles: It's good practice to add titles to cards if they contain multiple pieces of information.
  3. Scss Variables: Consider using SCSS variables for consistent styling.

Here's the updated code with these improvements incorporated:

<template>
  <div class="card-container">
    <el-card v-for="(item, index) in content" :key="index">
      <template #header>{{ item.title }}</template>
        {{ item.content }}
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { type ToolCall, type ToolCalls } from '@/components/markdown/tool-calls-render/index';
import { ref } from 'vue';

const toolCalls = ref<ToolCall[]>([
  {
    title: "Input:",
    content: "{input}",
  },
  {
    title: "Output:",
    content: "{output}",
  // Add more items as needed
]);
// You can define other props or data here...
</script>

<style scoped lang="scss">
.card-container {
  display: flex;
  gap: 16px;

  .el-card {
    width: calc(45% - 16px);
  }
}
</style>

Key Changes:

  • Converted prop content from ToolCalls to ToolCall[], making it compatible with arrays of tool calls.
  • Added a simple loop to iterate over each item in the toolCalls array and render them inside el-cards.
  • Added headers to each card using #header slot to denote what kind of information is contained within each section.

These changes should make the template more dynamic and user friendly while maintaining proper TypeScript typing.

6 changes: 6 additions & 0 deletions ui/src/components/markdown/tool-calls-render/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export interface ToolCalls {
type: string
icon?: string
title: string
content: any
}
30 changes: 30 additions & 0 deletions ui/src/components/markdown/tool-calls-render/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Feb 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The props declaration at the beginning of the file is missing a closing parenthesis. Consider adding it like so:

@@ -7,4 +7,5 @@
   import { type ToolCalls } from './index'
   import defaultIcon from '@/assets/workflow/icon_robot.svg'

-import props from<{ content?: string }>()
+const props = defineProps<{
+  content?: string
+}>()

This should fix an issue with TypeScript's syntax highlighting when editing this code snippet.

In terms of readability and clarity:

  • The CSS scoped styles block should be separated for better visual separation in larger projects.

If you have more specific optimizations or improvements in mind, feel free to share them!