@vyr/service-chat 0.0.34

package/src/components/ChatExecutor.vue

@@ -0,0 +1,85 @@
+<template>
+  <div v-if="tasks.length" class="chat-executor">
+    <ExecutorHeader :title="title" :spinning="hasRunningTask" :completed="completedCount" :total="totalCount" />
+
+    <div class="tools-list">
+      <ToolItem v-for="task in tasks" :key="task.toolCallId" :task="task" :expanded="isTaskExpanded(task.toolCallId)"
+        @toggle="handleToggle" @copy="handleCopy" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { language } from '../locale'
+import { useExecutor } from './executor/useExecutor'
+import { ExecutorProps, ExecutorEmits, ParamSectionType } from './executor/types'
+import ExecutorHeader from './executor/ExecutorHeader.vue'
+import ToolItem from './executor/ToolItem.vue'
+
+const props = withDefaults(defineProps<ExecutorProps>(), {
+  tasks: () => [],
+})
+
+const title = computed(() => {
+  return completedCount.value === totalCount.value ? language.get('executor.task.execution.record') : language.get('executor.task.status.running')
+})
+
+const emit = defineEmits<ExecutorEmits>()
+
+const {
+  hasRunningTask,
+  completedCount,
+  totalCount,
+  expandedTasks,
+  toggleTask,
+  isTaskExpanded,
+  copyToClipboard,
+  formatJSON
+} = useExecutor(props)
+
+// 处理任务展开/折叠
+const handleToggle = (taskId: string | number) => {
+  toggleTask(taskId)
+  emit('task:toggle', taskId, expandedTasks.value[taskId])
+}
+
+// 处理复制
+const handleCopy = async (type: string, taskId: string | number) => {
+  const task = props.tasks.find(t => t.toolCallId === taskId)
+  if (!task) return
+
+  let content: any
+  if (type === 'input') {
+    content = task.args
+  } else if (type === 'output') {
+    content = task.result
+  } else if (type === 'error') {
+    content = task.result
+  }
+
+  if (!content) return
+
+  const text = formatJSON(content)
+  await copyToClipboard(text, type as ParamSectionType, taskId, emit)
+}
+</script>
+
+<style scoped>
+.chat-executor {
+  background: #252526;
+  border-radius: 20px;
+  margin: 16px 0;
+  padding: 24px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  width: 100%;
+  border: 1px solid #3c3c3d;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+}
+
+.tools-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>

package/src/components/ChatProcess.vue

@@ -0,0 +1,144 @@
+<template>
+  <vyr-scroll ref="scrollRef" :padding="10" :margin="10" @wheel="onWheel">
+    <div class='chat-list'>
+      <template v-for="(msg, idx) in chatService.manager.window.history.list" :key="idx">
+        <McBubble v-if="msg.role === 'user'" :content="getTextContent(msg)" :align="'right'"
+          :avatarConfig="getAvatarConfig(msg)">
+          <template #bottom>
+            <div class="bubble-bottom-operations" v-if="msg.complete">
+              <McCopyIcon :text="getTextContent(msg)" class="copy-class" />
+            </div>
+          </template>
+        </McBubble>
+        <McBubble v-else :loading="msg.loading" :avatarConfig="getAvatarConfig(msg)" :data-v-idx="idx">
+          <template v-for="(chunk, i) in msg.chunks" :key="i">
+            <ChatExecutor v-if="chunk.type === 'tool'" :tasks="getTasks(chunk)"></ChatExecutor>
+            <McMarkdownCard v-else :content="getRenderContent(chunk)" :theme="themeService.currentTheme"
+              :enableThink="true" :mdPlugins="mdPlugins" :enableMermaid="true" />
+          </template>
+          <template #bottom>
+            <div class="bubble-bottom-operations" v-if="msg.complete">
+              <McCopyIcon :text="getTextContent(msg)" class="copy-class" />
+            </div>
+          </template>
+        </McBubble>
+      </template>
+    </div>
+  </vyr-scroll>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref, useTemplateRef, watch } from 'vue';
+import { runtime } from '@vyr/runtime';
+import { themeService, VyrScroll } from '@vyr/design'
+import { McBubble, McMarkdownCard, McCopyIcon } from '@matechat/core';
+import { katex } from '@mdit/plugin-katex';
+import { ChatMessage, ChatMessageChunk, ChatMessageToolChunk } from '../chat';
+import { ChatService } from "../ChatService";
+import ChatExecutor from './ChatExecutor.vue';
+
+const chatService = runtime.get<ChatService>('chat')
+const avatarSize = ref(36)
+const wheelHadUp = ref(false);
+const mdPlugins = ref([
+  { plugin: katex, opt: {} },
+])
+
+const getTasks = (chunk: ChatMessageToolChunk) => {
+  const toolNames = [...chunk.collection.values()]
+  return toolNames
+}
+
+const getAvatarConfig = (msg: ChatMessage) => {
+  return {
+    imgSrc: msg.avatarConfig,
+    width: avatarSize.value,
+    height: avatarSize.value
+  }
+}
+
+const getTextContent = (msg: ChatMessage) => {
+  let content = ''
+  for (const chunk of msg.chunks) {
+    if (chunk.type === 'text') content += chunk.content
+  }
+  return content
+}
+
+const getRenderContent = (chunk: ChatMessageChunk) => {
+  if (chunk.type === 'text') {
+    return chunk.content
+  } else if (chunk.type === 'reasoning') {
+    return `<think>${chunk.content}</think>`
+  }
+  //  else {
+  //   let displayContent = `\n\n**🟡 ${chunk.toolName}**\n`;
+  //   displayContent += `\n**${language.get('chat.process.tool.call.args')}**\n\`\`\`json\n${JSON.stringify(chunk.args, null, 2)}\n\`\`\`\n`;
+  //   displayContent += `\n**${language.get('chat.process.tool.call.result')}**\n\`\`\`json\n${JSON.stringify(chunk.result, null, 2)}\n\`\`\`\n`;
+
+  //   return displayContent
+  // }
+}
+
+const onWheel = (e: WheelEvent) => {
+  const wrapper = scrollRef?.value?.wrapper;
+  if (wrapper) {
+    wheelHadUp.value = e.deltaY < 0;
+  }
+}
+
+const scrollRef = useTemplateRef('scrollRef')
+const nextTo = () => {
+  if (wheelHadUp.value) return
+  const wrapper = scrollRef?.value?.wrapper;
+  if (!wrapper) return
+  wrapper.scrollTo({
+    top: wrapper.scrollHeight,
+    behavior: 'smooth',
+  })
+}
+const scrollTo = () => nextTick(nextTo)
+watch(() => chatService.manager.window.history.lastMessage.current, scrollTo, { deep: true })
+</script>
+
+<style scoped lang="scss">
+@import "devui-theme/styles-var/devui-var.scss";
+@import 'katex/dist/katex.min.css';
+
+:deep(.mc-bubble-content-container) {
+  max-width: calc(100% - 78px) !important;
+
+  .mc-markdown-render {
+    overflow: hidden;
+  }
+}
+
+:deep(.mc-bubble-right) {
+  .bubble-bottom-operations {
+    text-align: right;
+  }
+}
+
+.tool-runing {
+  width: 100%;
+  height: 1.5em;
+  line-height: 1.5em;
+  display: flex;
+  align-items: center;
+
+  .tool-loading {
+    margin-left: 4px;
+    animation: loading-rotate 1.5s infinite;
+  }
+}
+
+@keyframes loading-rotate {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/ChatView.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="chat-view-wrapper" @mousedown="unactive">
+    <div class="chat-view-container">
+      <Welcome v-if="chatService.manager.window.history.list.length === 0" />
+      <ChatProcess class="chat-message" v-else />
+      <div class="new-convo-button">
+        <div class="agent-knowledge">
+          <ChatWindow class="chat-item" />
+          <span class="agent-knowledge-dividing-line"></span>
+          <ChatAgent class="chat-item" />
+        </div>
+        <div class="new-chat-btn" @click="addWindow">
+          <i class="vyrfont vyr-add"></i>
+        </div>
+      </div>
+      <Input />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { runtime, ShortcutkeyService } from "@vyr/runtime";
+import { ChatService } from "../ChatService";
+import ChatProcess from "./ChatProcess.vue";
+import Input from "./Input.vue";
+import Welcome from "./Welcome.vue";
+import ChatAgent from './ChatAgent.vue'
+import ChatWindow from './ChatWindow.vue'
+
+const chatService = runtime.get<ChatService>('chat')
+const shortcutkeyService = runtime.get<ShortcutkeyService>('shortcutkey')
+
+const unactive = () => {
+  shortcutkeyService.unactive()
+}
+
+const addWindow = () => {
+  if (chatService.manager.isPendingWindow()) return
+  const window = chatService.manager.createWindow({ agentId: chatService.getDefaultAgentId() })
+  chatService.manager.setCurrentWindow(window)
+}
+</script>
+
+<style scoped lang="scss">
+@import "devui-theme/styles-var/devui-var.scss";
+
+.chat-view-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  color: #fff;
+}
+
+.chat-view-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+
+  .chat-message {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    width: 100%;
+    padding-top: 20px;
+  }
+
+  .chat-item {
+    border-radius: $devui-border-radius-full;
+
+    :deep(.vyr-dropdown-trigger) {
+      padding: 0 8px 0 4px;
+    }
+  }
+
+  .new-convo-button {
+    box-sizing: border-box;
+    padding: 0 12px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+    max-width: 1200px;
+    height: 39px;
+    gap: 4px;
+
+    .agent-knowledge {
+      flex: 1;
+      display: flex;
+      align-items: center;
+
+      .agent-knowledge-dividing-line {
+        width: 1px;
+        height: 14px;
+        margin: 0 12px;
+        background-color: $devui-line;
+      }
+    }
+  }
+
+  .new-chat-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    border-radius: $devui-border-radius-full;
+    background-color: $devui-base-bg;
+    box-shadow: 0px 1px 8px 0px rgba(25, 25, 25, 0.06);
+    cursor: pointer;
+
+    &:hover {
+      color: $devui-brand;
+    }
+  }
+}
+
+body[ui-theme-type="light"] {
+  .chat-view-wrapper {
+    background: linear-gradient(180deg,
+        rgba(255, 255, 255, 0.95),
+        rgba(248, 250, 255, 0.95) 99%);
+  }
+}
+
+body[ui-theme-type="dark"] {
+  .chat-view-wrapper {
+    background-color: $devui-global-bg;
+  }
+}
+</style>

package/src/components/ChatWindow.vue

@@ -0,0 +1,64 @@
+<template>
+  <vyr-dropdown class="window-wrapper" :model-value="chatService.manager.window.threadId" :data="windows"
+    :removable="true" @change="changeWindow" @remove="deleteWindow">
+    <template #default>
+      <div class="window">{{ chatService.manager.window.threadId }}</div>
+    </template>
+  </vyr-dropdown>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { runtime } from '@vyr/runtime';
+import { Option, VyrDropdown } from '@vyr/design';
+import { ChatService } from '../ChatService';
+
+const chatService = runtime.get<ChatService>('chat')
+
+const windows = computed(() => {
+  const items = chatService.manager.getWindows()
+  const windows: Option[] = []
+  for (const item of items) {
+    windows.push({ label: item.threadId, value: item.threadId })
+  }
+  return windows
+})
+
+const deleteWindow = async (index: number) => {
+  if (windows.value.length === 1) return
+  const item = windows.value[index]
+  const window = chatService.manager.getWindow(item.value)
+  if (window === null) return
+  await chatService.manager.deleteWindow(window)
+  if (chatService.manager.window === window) {
+    const current = chatService.manager.getWindows()[0]
+    chatService.manager.setCurrentWindow(current)
+  }
+}
+const changeWindow = (id: string) => {
+  const window = chatService.manager.getWindow(id)
+  if (window === null) return
+  chatService.manager.setCurrentWindow(window)
+}
+</script>
+
+<style scoped lang="scss">
+@import "devui-theme/styles-var/devui-var.scss";
+
+$item-height: 24px;
+
+.window-wrapper {
+  width: 140px;
+  background-color: $devui-base-bg;
+  box-shadow: 0px 1px 8px 0px rgba(25, 25, 25, 0.06);
+  cursor: pointer;
+
+  .window {
+    overflow: hidden;
+    height: $item-height;
+    line-height: $item-height;
+    padding: 0 0 0 8px;
+    box-sizing: border-box;
+  }
+}
+</style>

package/src/components/Input.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="input-container">
+    <McInput :value="chatService.manager.window.question" :maxLength="chatService.manager.window.maxLength"
+      :variant="BorderLess" :loading="chatService.manager.window.runing" :disabled="chatService.manager.window.disbaled"
+      :placeholder="language.get('chat.input.placeholder')" @change="updateQuestion" @submit="onSubmit"
+      @mouseenter="mouseenter" @mouseup="mouseup" @cancel="onCancel">
+      <template #extra>
+        <div class="input-foot-wrapper">
+          <span class="input-foot-maxlength">
+            {{ chatService.manager.window.question.length }}/{{ chatService.manager.window.maxLength }}
+          </span>
+        </div>
+      </template>
+    </McInput>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { McInput } from '@matechat/core';
+import { DataService, DraggableService, runtime } from '@vyr/runtime';
+import { DraggableController } from '@vyr/design';
+import { language } from '../locale';
+import { ChatSession } from '../chat';
+import { ChatService } from '../ChatService';
+
+const dataService = runtime.get<DataService>('data')
+const chatService = runtime.get<ChatService>('chat')
+const BorderLess: any = 'borderless'
+
+const updateQuestion = (value: string) => {
+  chatService.manager.window.question = value
+}
+
+let result: ChatSession | null = null
+
+const onSubmit = async () => {
+  if (chatService.manager.window.runing) return
+  chatService.manager.window.runing = true
+  try {
+    result = await chatService.manager.window.ask(chatService.manager.window.question)
+    await result.done()
+  } catch (error) {
+    console.error(error)
+  } finally {
+    chatService.manager.window.runing = false
+    result = null
+  }
+};
+
+const onCancel = async () => {
+  if (result === null) return
+  try {
+    chatService.manager.window.disbaled = true
+    await result.stop()
+  } catch (error) {
+    console.log(error)
+  } finally {
+    chatService.manager.window.disbaled = false
+  }
+}
+
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = draggableService.get(DraggableService.key.chat)
+const mouseenter = (e: MouseEvent) => {
+  if (DraggableController.enabled === false) return
+  DraggableController.enter({ key: '', value: null }, draggable)
+}
+const mouseup = (e: MouseEvent) => {
+  if (DraggableController.enabled === false) return
+  DraggableController.end({ key: '', value: dataService.sidebar.url }, draggable, 'insert')
+}
+</script>
+
+<style scoped lang="scss">
+@import "devui-theme/styles-var/devui-var.scss";
+
+.input-container {
+  width: 100%;
+  max-width: 1200px;
+  padding: 0 12px 12px 12px;
+  box-sizing: border-box;
+
+  .input-foot-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    margin-right: 8px;
+
+    .input-word-container {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      height: 30px;
+      color: $devui-text;
+      font-size: $devui-font-size;
+      border-radius: 4px;
+      padding: 6px;
+      cursor: pointer;
+
+      svg {
+        width: 14px;
+        height: 14px;
+      }
+
+      span {
+        font-size: $devui-font-size-sm;
+      }
+
+      &:hover {
+        background-color: var(--devui-icon-hover-bg);
+      }
+    }
+
+    span {
+      color: $devui-text;
+      cursor: pointer;
+    }
+
+    .input-foot-dividing-line {
+      width: 1px;
+      height: 14px;
+      background-color: $devui-line;
+      margin: 0 8px;
+    }
+
+    .input-foot-maxlength {
+      font-size: $devui-font-size-sm;
+      color: $devui-aide-text;
+    }
+  }
+
+  :deep() {
+    .mc-button svg path {
+      transition: fill $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
+    }
+  }
+
+  .statement-box {
+    font-size: 12px;
+    margin-top: 8px;
+    color: $devui-aide-text;
+    text-align: center;
+
+    .separator {
+      height: 12px;
+      margin: 0 4px;
+      border: 0.6px solid $devui-disabled-text;
+    }
+
+    .link-span {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+}
+
+.input-container {
+  :deep() {
+    .mc-button:disabled {
+      color: $devui-disabled-text;
+      background-color: $devui-disabled-bg;
+
+      svg path {
+        fill: $devui-disabled-text;
+      }
+    }
+  }
+}
+</style>

package/src/components/Welcome.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="welcome-page">
+    <div class="content-wrapper">
+      <McIntroduction :logo-img="'logo/透明图标.png'" :title="'VYR'" :sub-title="''" :description="[
+        language.get('chat.introduction.title'),
+        language.get('chat.introduction.message'),
+      ]" class="welcome-introduction">
+      </McIntroduction>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { McIntroduction } from '@matechat/core';
+import { language } from '../locale';
+
+</script>
+
+<style scoped lang="scss">
+@import "devui-theme/styles-var/devui-var.scss";
+
+.welcome-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  box-sizing: border-box;
+
+  .content-wrapper {
+    margin: auto 0;
+    width: 100%;
+    gap: 24px;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  overflow: auto;
+  width: 100%;
+  max-width: 1200px;
+  padding: 0 12px;
+  gap: 24px;
+
+  .welcome-introduction {
+    :deep() {
+      .mc-introduction-description {
+        font-size: var(--devui-font-size, 14px);
+
+        div {
+          line-height: 2;
+        }
+      }
+    }
+  }
+}
+</style>