@vyr/service-chat 0.0.34

package/src/components/executor/ExecutorHeader.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="executor-header">
+        <svg width="28" height="28" viewBox="0 0 24 24" class="loading-icon" :class="{ spinning }">
+            <circle cx="12" cy="12" r="10" stroke="#0078d4" stroke-width="2" fill="none" stroke-dasharray="30 30" />
+            <circle cx="12" cy="6" r="2" fill="#0078d4" />
+        </svg>
+        <span class="header-title">{{ title }}</span>
+        <span class="status-badge">
+            {{ language.get('executor.header.status', { completed, total }) }}
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { language } from '../../locale/Language'
+
+interface Props {
+    title?: string
+    spinning?: boolean
+    completed: number
+    total: number
+}
+
+defineProps<Props>()
+</script>
+
+<style scoped>
+@keyframes spin {
+    0% {
+        transform: rotate(0);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.executor-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid #3c3c3d;
+}
+
+.loading-icon {
+    transform: rotate(96deg);
+    transition: all 0.3s ease;
+}
+
+.loading-icon.spinning {
+    animation: spin 2s linear infinite;
+}
+
+.header-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #cccccc;
+    letter-spacing: 0.5px;
+}
+
+.status-badge {
+    background: #0078d4;
+    color: #ffffff;
+    padding: 4px 12px;
+    border-radius: 30px;
+    font-size: 12px;
+    font-weight: 500;
+    margin-left: auto;
+}
+</style>

package/src/components/executor/GearLoading.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="gear-container">
+    <svg viewBox="200 200 624 624" version="1.1" xmlns="http://www.w3.org/2000/svg" :width="size" :height="size"
+      :class="{ spinning: animate }">
+      <path
+        d="M512 225.21821213a26.07107163 26.07107163 0 0 1 26.07107163 26.07107163v78.21321487a26.07107163 26.07107163 0 1 1-52.14214326 0V251.28928375a26.07107163 26.07107163 0 0 1 26.07107163-26.07107162z"
+        :fill="colors[0]" />
+      <path
+        d="M655.39089394 263.64045393a26.07107163 26.07107163 0 0 1 9.54852998 35.61960161l-39.10660743 67.75219738a26.1362493 26.1362493 0 0 1-43.37574543 2.93299557 26.07107163 26.07107163 0 0 1-1.79238618-29.00406719l39.10660745-67.78478622A26.07107163 26.07107163 0 0 1 655.39089394 263.67304277z"
+        :fill="colors[1]" />
+      <path
+        d="M760.35954607 368.60910606a26.07107163 26.07107163 0 0 1-9.54852999 35.61960161l-67.71960855 39.10660745a26.07107163 26.07107163 0 0 1-26.07107161-45.16813161l67.71960854-39.10660743a26.07107163 26.07107163 0 0 1 35.61960161 9.54852998z"
+        :fill="colors[2]" />
+      <path
+        d="M798.78178787 512a26.07107163 26.07107163 0 0 1-26.07107163 26.07107163h-78.21321487a26.07107163 26.07107163 0 0 1 0-52.14214326H772.71071625a26.07107163 26.07107163 0 0 1 26.07107162 26.07107163z"
+        :fill="colors[3]" />
+      <path
+        d="M760.35954607 655.39089394a26.07107163 26.07107163 0 0 1-35.61960161 9.54852998l-67.71960854-39.10660743a26.10366046 26.10366046 0 0 1 6.19187951-47.90559412 26.07107163 26.07107163 0 0 1 19.8791921 2.73746251l67.71960855 39.10660745a26.07107163 26.07107163 0 0 1 9.54852999 35.61960161z"
+        :fill="colors[4]" />
+      <path
+        d="M655.39089394 760.35954607a26.07107163 26.07107163 0 0 1-35.61960161-9.54852999l-39.10660745-67.71960855a26.07107163 26.07107163 0 0 1 45.16813161-26.07107161l39.10660743 67.71960854a26.07107163 26.07107163 0 0 1-9.54852998 35.61960161z"
+        :fill="colors[5]" />
+      <path
+        d="M512 798.78178787a26.07107163 26.07107163 0 0 1-26.07107163-26.07107163v-78.21321487a26.07107163 26.07107163 0 0 1 52.14214326 0V772.71071625a26.07107163 26.07107163 0 0 1-26.07107163 26.07107162z"
+        :fill="colors[6]" />
+      <path
+        d="M368.60910606 760.35954607a26.07107163 26.07107163 0 0 1-9.54852998-35.61960161l39.10660743-67.71960854a26.07107163 26.07107163 0 1 1 45.16813161 26.07107161l-39.10660745 67.71960855a26.07107163 26.07107163 0 0 1-35.61960161 9.54852999z"
+        :fill="colors[5]" />
+      <path
+        d="M263.64045393 655.39089394a26.07107163 26.07107163 0 0 1 9.54852999-35.61960161l67.75219738-39.10660745a26.07107163 26.07107163 0 0 1 26.07107162 45.16813161l-67.78478622 39.10660743A26.07107163 26.07107163 0 0 1 263.67304277 655.39089394z"
+        :fill="colors[4]" />
+      <path
+        d="M225.21821213 512a26.07107163 26.07107163 0 0 1 26.07107163-26.07107163h78.21321487a26.07107163 26.07107163 0 0 1 0 52.14214326H251.28928375a26.07107163 26.07107163 0 0 1-26.07107162-26.07107163z"
+        :fill="colors[3]" />
+      <path
+        d="M263.64045393 368.60910606a26.07107163 26.07107163 0 0 1 35.61960161-9.54852998l67.75219738 39.10660743a26.07107163 26.07107163 0 1 1-26.07107162 45.16813161l-67.78478622-39.10660745A26.07107163 26.07107163 0 0 1 263.67304277 368.60910606z"
+        :fill="colors[2]" />
+      <path
+        d="M368.60910606 263.64045393a26.07107163 26.07107163 0 0 1 35.61960161 9.54852999l39.10660745 67.75219738a26.07107163 26.07107163 0 0 1-45.16813161 26.07107162l-39.10660743-67.78478622A26.07107163 26.07107163 0 0 1 368.60910606 263.67304277z"
+        :fill="colors[1]" />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+interface Props {
+  size?: number
+  animate?: boolean
+  text?: string
+  colors?: string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 48,
+  animate: true,
+  colors: () => [
+    '#0078d4', // 最深
+    '#1e4a6b',
+    '#2a5f8a',
+    '#3575a8',
+    '#408ac7',
+    '#4ba0e6',
+    '#56b5ff' // 最浅
+  ]
+})
+</script>
+
+<style scoped>
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.gear-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  min-height: 150px;
+  border-radius: 0 0 12px 12px;
+}
+
+.gear-container svg {
+  transition: opacity 0.2s ease;
+}
+
+.gear-container svg.spinning {
+  animation: spin 3s linear infinite;
+}
+
+.gear-container svg:hover {
+  opacity: 1;
+}
+
+.gear-text {
+  margin-top: 12px;
+  font-size: 11px;
+  color: #6b6b6d;
+  letter-spacing: 0.5px;
+}
+</style>

package/src/components/executor/ParamSection.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="param-section" :class="[type, statusClass]">
+    <div class="param-header">
+      <span class="param-title">
+        <svg v-if="type === 'input'" viewBox="0 0 24 24" fill="none" stroke="currentColor" width="14" height="14">
+          <path d="M20 12H4M12 4v16" stroke-width="2" stroke-linecap="round" />
+          <path d="M16 8l4 4-4 4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+        <svg v-else-if="type === 'output'" viewBox="0 0 24 24" fill="none" stroke="currentColor" width="14" height="14">
+          <rect x="4" y="4" width="16" height="16" rx="2" stroke-width="2" />
+          <path d="M8 8h8v8H8z" stroke-width="2" stroke-linecap="round" />
+          <path v-if="state === 'success'" d="M20 6L9 17l-5-5" stroke-width="2" stroke="#2e7d32" stroke-linecap="round"
+            stroke-linejoin="round" />
+          <circle v-else-if="state === 'failed'" cx="12" cy="12" r="10" stroke="#f44336" stroke-width="2"
+            fill="none" />
+          <path v-else-if="state === 'running'" d="M12 8v4M12 16h.01" stroke="#f44336" stroke-width="2"
+            stroke-linecap="round" />
+        </svg>
+        <svg v-else-if="type === 'error'" viewBox="0 0 24 24" fill="none" stroke="currentColor" width="14" height="14">
+          <rect x="4" y="4" width="16" height="16" rx="2" stroke-width="2" />
+          <path d="M8 8h8v8H8z" stroke-width="2" stroke-linecap="round" />
+          <circle cx="12" cy="12" r="10" stroke="#f44336" stroke-width="2" fill="none" />
+          <path d="M12 8v4M12 16h.01" stroke="#f44336" stroke-width="2" stroke-linecap="round" />
+        </svg>
+        {{ title }}
+      </span>
+      <div class="param-actions">
+        <slot name="actions">
+          <button v-if="!hideCopy" class="copy-btn" @click="handleCopy">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="14" height="14">
+              <path d="M16 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5V16"
+                stroke-width="2" />
+              <rect x="8" y="8" width="13" height="13" rx="2" stroke-width="2" />
+            </svg>
+          </button>
+        </slot>
+      </div>
+    </div>
+    <div v-if="loading" class="loading-placeholder">
+      <GearLoading :size="32" :show-text="false" />
+    </div>
+    <vyr-scroll v-else class="param-scroll" :padding="8" :margin="8">
+      <pre class="json-viewer"><code>{{ formattedContent }}</code></pre>
+    </vyr-scroll>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TaskState, ParamSectionType } from './types'
+import { VyrScroll } from '@vyr/design'
+import GearLoading from './GearLoading.vue'
+
+interface Props {
+  type: ParamSectionType
+  title: string
+  content?: any
+  state?: TaskState
+  loading?: boolean
+  hideCopy?: boolean
+  formatter?: (content: any) => string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  content: null,
+  state: undefined,
+  loading: false,
+  hideCopy: false,
+  formatter: undefined
+})
+
+const emit = defineEmits<{
+  (e: 'copy'): void
+}>()
+
+const statusClass = computed(() => {
+  if (!props.state) return ''
+  return props.state
+})
+
+const formattedContent = computed(() => {
+  if (props.formatter) {
+    return props.formatter(props.content)
+  }
+  if (props.content === undefined || props.content === null) return 'null'
+  if (typeof props.content === 'string') {
+    try {
+      const parsed = JSON.parse(props.content)
+      return JSON.stringify(parsed, null, 2)
+    } catch {
+      return props.content
+    }
+  }
+  try {
+    return JSON.stringify(props.content, null, 2)
+  } catch {
+    return String(props.content)
+  }
+})
+
+const handleCopy = () => {
+  emit('copy')
+}
+</script>
+
+<style scoped>
+.param-section {
+  border-radius: 12px;
+  border: 1px solid #3c3c3d;
+  overflow: hidden;
+}
+
+.param-section.running .param-header {
+  background: #2a2d2e;
+}
+
+.param-section.running .param-title {
+  color: #0078d4;
+}
+
+.param-section.failed .param-header {
+  border-left: 4px solid #f44336;
+}
+
+.param-section.failed .param-title {
+  color: #f44336;
+}
+
+.param-section.success .param-header {
+  border-left: 4px solid #2e7d32;
+}
+
+.param-section.success .param-title {
+  color: #2e7d32;
+}
+
+.param-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: #2a2d2e;
+  border-bottom: 1px solid #3c3c3d;
+}
+
+.param-title {
+  font-size: 12px;
+  color: #cccccc;
+  font-weight: 500;
+  letter-spacing: 0.3px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.param-title svg {
+  opacity: 0.7;
+}
+
+.param-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.copy-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: #6b6b6d;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.copy-btn:hover {
+  background: #3c3c3d;
+  color: #0078d4;
+}
+
+.loading-placeholder {
+  min-height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.param-scroll{
+  max-height: 300px;
+}
+
+.json-viewer {
+  font-family: 'Consolas', 'Monaco', 'Menlo', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #cccccc;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* 自定义滚动条 */
+.json-viewer::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.json-viewer::-webkit-scrollbar-track {
+  background: #2a2d2e;
+  border-radius: 4px;
+}
+
+.json-viewer::-webkit-scrollbar-thumb {
+  background: #4b4b4d;
+  border-radius: 4px;
+}
+
+.json-viewer::-webkit-scrollbar-thumb:hover {
+  background: #6b6b6d;
+}
+
+/* JSON 语法高亮 */
+.json-viewer .string {
+  color: #ce9178;
+}
+
+.json-viewer .number {
+  color: #b5cea8;
+}
+
+.json-viewer .boolean {
+  color: #569cd6;
+}
+
+.json-viewer .null {
+  color: #569cd6;
+}
+
+.json-viewer .key {
+  color: #9cdcfe;
+}
+</style>

package/src/components/executor/ToolItem.vue

@@ -0,0 +1,262 @@
+<template>
+    <div class="tool-item" :data-state="task.state" :class="{ expanded }">
+        <!-- 任务主行 -->
+        <div class="tool-main" @click="handleToggle">
+            <div class="state-indicator" :class="`state-${task.state}`"></div>
+            <span class="tool-name">{{ task.toolName }}</span>
+            <span class="state-tag" :class="getStateTagClass(task.state)">
+                {{ getStateTag(task.state) }}
+            </span>
+            <div class="tool-actions">
+                <span v-if="task.args" class="param-preview" :title="paramPreview" @click.stop="handleToggle">
+                    {{ paramPreview }}
+                </span>
+                <button class="expand-btn" :class="{ expanded }" @click.stop="handleToggle">
+                    <svg width="16" height="16" viewBox="0 0 16 16">
+                        <path d="M4 6L8 10L12 6" stroke="#6b6b6d" stroke-width="1.5" fill="none"
+                            stroke-linecap="round" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+
+        <!-- 参数详情区域 -->
+        <div v-if="expanded" class="param-detail">
+            <!-- 输入参数 -->
+            <ParamSection type="input" :title="language.get('executor.param.input')" :content="task.args"
+                @copy="handleCopy('input')" />
+
+            <!-- 输出/错误参数 -->
+            <ParamSection v-if="task.state === 'running'" type="output" :title="language.get('executor.param.output')"
+                :loading="true" :hide-copy="true" />
+            <ParamSection v-else-if="task.state === 'failed'" type="error" :title="language.get('executor.param.error')"
+                :content="task.result" :state="task.state" @copy="handleCopy('error')" />
+            <ParamSection v-else-if="task.state === 'success'" type="output"
+                :title="language.get('executor.param.output')" :content="task.result" :state="task.state"
+                :formatter="formatter" @copy="handleCopy('output')" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { language } from '../../locale/Language'
+import { TaskItem } from './types'
+import { useExecutor } from './useExecutor'
+import ParamSection from './ParamSection.vue'
+
+interface Props {
+    task: TaskItem
+    expanded?: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+    (e: 'toggle', taskId: string | number): void
+    (e: 'copy', type: string, taskId: string | number): void
+}>()
+
+const { getParamPreview, getStateTag, getStateTagClass, formatJSON } = useExecutor({ tasks: [] })
+
+const paramPreview = computed(() => {
+    return getParamPreview(props.task.args)
+})
+
+const formatter = (conetnt: any) => {
+    if (typeof conetnt?.data === 'string' && conetnt.data.startsWith('{')) {
+        try {
+            conetnt.data = JSON.parse(conetnt.data)
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    return conetnt
+}
+
+const handleToggle = () => {
+    emit('toggle', props.task.toolCallId)
+}
+
+const handleCopy = (type: string) => {
+    emit('copy', type, props.task.toolCallId)
+}
+</script>
+
+<style scoped>
+.tool-item {
+    display: flex;
+    flex-direction: column;
+    border-radius: 12px;
+    transition: all 0.2s ease;
+    background: transparent;
+    border: 1px solid transparent;
+}
+
+.tool-item:hover,
+.tool-item.expanded {
+    border-color: #3c3c3d;
+}
+
+/* 工具主行 */
+.tool-main {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.tool-main:hover {
+    background: #2a2d2e;
+}
+
+/* 状态指示器 */
+.state-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(0, 120, 212, 0.7);
+    }
+
+    70% {
+        box-shadow: 0 0 0 10px rgba(0, 120, 212, 0);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 rgba(0, 120, 212, 0);
+    }
+}
+
+.state-running {
+    background: #0078d4;
+    animation: pulse 1.5s infinite;
+    box-shadow: 0 0 0 rgba(0, 120, 212, 0.4);
+}
+
+.state-success {
+    background: #2e7d32;
+}
+
+.state-failed {
+    background: #f44336;
+}
+
+/* 工具名称 */
+.tool-name {
+    font-weight: 500;
+    color: #cccccc;
+    flex: 1;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* 状态标签 */
+.state-tag {
+    font-size: 11px;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-weight: 500;
+    margin-right: 8px;
+}
+
+.state-tag.running {
+    background: #1a3b4d;
+    color: #0078d4;
+}
+
+.state-tag.success {
+    background: #1e3a2a;
+    color: #2e7d32;
+}
+
+.state-tag.failed {
+    background: #4d2a2a;
+    color: #f44336;
+}
+
+/* 工具操作区 */
+.tool-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+/* 参数预览 */
+.param-preview {
+    font-size: 11px;
+    color: #9b9b9b;
+    background: transparent;
+    padding: 0;
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+    cursor: pointer;
+    transition: color 0.2s ease;
+    line-height: 1.5;
+}
+
+.param-preview:hover {
+    color: #0078d4;
+}
+
+/* 展开按钮 */
+.expand-btn {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+.expand-btn:hover {
+    background: #3c3c3d;
+}
+
+.expand-btn svg {
+    transition: transform 0.3s ease;
+}
+
+.expand-btn.expanded svg {
+    transform: rotate(180deg);
+}
+
+/* 参数详情区域 */
+.param-detail {
+    margin: 12px 16px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+</style>

package/src/components/executor/types.ts

@@ -0,0 +1,27 @@
+// 任务状态类型
+export type TaskState = 'running' | 'success' | 'failed'
+
+// 任务项接口
+export interface TaskItem {
+  toolCallId: string | number
+  toolName: string
+  state: TaskState
+  args: Record<string, any> | any[] | string | number | boolean | null
+  result?: Record<string, any> | any[] | string | number | boolean | null
+}
+
+// 参数区域类型
+export type ParamSectionType = 'input' | 'output' | 'error'
+
+// 组件Props接口
+export interface ExecutorProps {
+  tasks: TaskItem[]
+  title?: string
+}
+
+// 事件发射接口
+export interface ExecutorEmits {
+  (e: 'copy:success', type: ParamSectionType, taskId: string | number): void
+  (e: 'copy:error', type: ParamSectionType, taskId: string | number): void
+  (e: 'task:toggle', taskId: string | number, expanded: boolean): void
+}