@huyooo/ai-chat-frontend-vue 0.2.13 → 0.2.14

package/src/components/message/ContentRenderer.vue

@@ -1,61 +0,0 @@
-<template>
-  <div v-if="blocks.length" class="content-renderer">
-    <template v-for="block in blocks" :key="block.id">
-      <!-- 自定义块渲染器 -->
-      <component
-        v-if="customRenderers[block.type]"
-        :is="customRenderers[block.type]"
-        :block="block"
-      />
-      <!-- 内置文本块 -->
-      <TextBlock v-else-if="block.type === 'text'" :block="block" />
-      <!-- 内置代码块 -->
-      <CodeBlock v-else-if="block.type === 'code'" :block="block" @copy="handleCodeCopy" />
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, type Component } from 'vue'
-import { parseContent } from '@huyooo/ai-chat-shared'
-import type { ContentBlock } from '@huyooo/ai-chat-shared'
-import { TextBlock, CodeBlock } from './blocks'
-
-const props = defineProps<{
-  /** 原始文本内容 */
-  content: string
-  /** 预解析的块列表（可选，用于流式更新） */
-  blocks?: ContentBlock[]
-}>()
-
-const emit = defineEmits<{
-  /** 代码复制事件 */
-  'code-copy': [code: string]
-}>()
-
-// 从上层注入的自定义块渲染器
-const customRenderers = inject<Record<string, Component>>('blockRenderers', {})
-
-// 解析后的内容块
-const blocks = computed(() => {
-  // 优先使用预解析的块
-  if (props.blocks?.length) {
-    return props.blocks
-  }
-  // 否则解析原始内容
-  return parseContent(props.content)
-})
-
-/** 代码复制处理 */
-function handleCodeCopy(code: string) {
-  emit('code-copy', code)
-}
-</script>
-
-<style scoped>
-.content-renderer {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-</style>

package/src/components/message/ToolResultRenderer.vue

@@ -1,27 +0,0 @@
-<template>
-  <component :is="resolvedComponent" v-bind="rendererProps" />
-</template>
-
-<script setup lang="ts">
-import { computed, inject, type Component } from 'vue'
-import type { ToolRendererProps } from '@huyooo/ai-chat-shared'
-import { DefaultToolResult } from './tool-results'
-
-const props = defineProps<ToolRendererProps>()
-
-// 从上层注入的自定义工具渲染器
-const customRenderers = inject<Record<string, Component>>('toolRenderers', {})
-
-// 解析使用哪个组件
-const resolvedComponent = computed(() => 
-  customRenderers[props.toolName] || DefaultToolResult
-)
-
-// 传递给渲染器的 props
-const rendererProps = computed<ToolRendererProps>(() => ({
-  toolName: props.toolName,
-  toolArgs: props.toolArgs,
-  toolResult: props.toolResult,
-  status: props.status,
-}))
-</script>

package/src/components/message/blocks/CodeBlock.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="code-block">
-    <!-- 头部：语言 + 操作按钮 -->
-    <div class="code-header">
-      <span class="code-language">{{ languageDisplay }}</span>
-      <div class="code-actions">
-        <CopyButton :text="block.content" title="复制代码" @copy="emit('copy', $event)" />
-      </div>
-    </div>
-    <!-- 代码内容 -->
-    <pre class="code-content"><code v-html="highlightedCode"></code></pre>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { highlightCode, getLanguageDisplayName } from '@huyooo/ai-chat-shared'
-import type { CodeBlock } from '@huyooo/ai-chat-shared'
-import CopyButton from '../../common/CopyButton.vue'
-
-const props = defineProps<{
-  block: CodeBlock
-}>()
-
-const emit = defineEmits<{
-  copy: [code: string]
-}>()
-
-// 语言显示名称
-const languageDisplay = computed(() => 
-  getLanguageDisplayName(props.block.language)
-)
-
-// 高亮后的代码
-const highlightedCode = computed(() => 
-  highlightCode(props.block.content, props.block.language)
-)
-</script>
-
-<style scoped>
-.code-block {
-  background: var(--chat-code-bg, #1f2937);
-  border-radius: 8px;
-  overflow: hidden;
-  margin: 8px 0;
-}
-
-.code-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  background: rgba(0, 0, 0, 0.2);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.code-language {
-  font-size: 12px;
-  color: var(--chat-text-muted, #888);
-  font-family: 'SF Mono', Monaco, monospace;
-}
-
-.code-content {
-  margin: 0;
-  padding: 12px;
-  overflow-x: auto;
-  font-family: 'SF Mono', Monaco, Consolas, monospace;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--chat-code-text, #e5e7eb);
-}
-
-/* 统一滚动条样式 */
-.code-content::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.code-content::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.code-content::-webkit-scrollbar-thumb {
-  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
-  border-radius: 3px;
-}
-
-.code-content::-webkit-scrollbar-thumb:hover {
-  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
-}
-
-.code-content code {
-  font-family: inherit;
-}
-
-/* highlight.js 主题覆盖 */
-.code-content :deep(.hljs-keyword) { color: #c678dd; }
-.code-content :deep(.hljs-string) { color: #98c379; }
-.code-content :deep(.hljs-number) { color: #d19a66; }
-.code-content :deep(.hljs-comment) { color: #5c6370; font-style: italic; }
-.code-content :deep(.hljs-function) { color: #61afef; }
-.code-content :deep(.hljs-class) { color: #e5c07b; }
-.code-content :deep(.hljs-variable) { color: #e06c75; }
-.code-content :deep(.hljs-operator) { color: #56b6c2; }
-.code-content :deep(.hljs-punctuation) { color: #abb2bf; }
-.code-content :deep(.hljs-property) { color: #e06c75; }
-.code-content :deep(.hljs-attr) { color: #d19a66; }
-.code-content :deep(.hljs-built_in) { color: #e5c07b; }
-.code-content :deep(.hljs-title) { color: #61afef; }
-.code-content :deep(.hljs-params) { color: #abb2bf; }
-.code-content :deep(.hljs-literal) { color: #56b6c2; }
-.code-content :deep(.hljs-type) { color: #e5c07b; }
-</style>

package/src/components/message/blocks/TextBlock.vue

@@ -1,21 +0,0 @@
-<template>
-  <div class="text-block">{{ block.content }}</div>
-</template>
-
-<script setup lang="ts">
-import type { TextBlock } from '@huyooo/ai-chat-shared'
-
-defineProps<{
-  block: TextBlock
-}>()
-</script>
-
-<style scoped>
-.text-block {
-  font-size: 14px;
-  line-height: 1.7;
-  color: var(--chat-text, #ccc);
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-</style>

package/src/components/message/blocks/index.ts

@@ -1,6 +0,0 @@
-/**
- * 内容块组件导出
- */
-
-export { default as TextBlock } from './TextBlock.vue'
-export { default as CodeBlock } from './CodeBlock.vue'

package/src/components/message/parts/ToolResultPart.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="tool-result-part">
-    <!-- 自定义渲染器 -->
-    <component 
-      v-if="customRenderer" 
-      :is="customRenderer" 
-      :tool-name="name"
-      :tool-args="args || {}"
-      :tool-result="result"
-      :status="status"
-    />
-    <!-- 默认渲染：可折叠的 JSON -->
-    <CollapsibleCard
-      v-else
-      v-model="expanded"
-      :icon="status === 'error' ? 'lucide:x-circle' : 'lucide:check-circle'"
-      :icon-color="status === 'error' ? 'var(--chat-error, #ef4444)' : 'var(--chat-success, #22c55e)'"
-      :title="name"
-      title-color="var(--chat-text, #ccc)"
-    >
-      <pre class="result-content">{{ formattedResult }}</pre>
-    </CollapsibleCard>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, inject, type Component } from 'vue'
-import CollapsibleCard from './CollapsibleCard.vue'
-import type { StepsExpandedType } from '../../../types'
-
-const props = withDefaults(defineProps<{
-  id: string
-  name: string
-  args?: Record<string, unknown>
-  result: unknown
-  status: 'done' | 'error' | 'cancelled' | 'skipped'
-  expandedType?: StepsExpandedType
-}>(), {
-  expandedType: 'auto'
-})
-
-// 注入自定义渲染器配置
-const toolRenderers = inject<Record<string, Component>>('toolRenderers', {})
-
-// 获取自定义渲染器
-const customRenderer = computed(() => toolRenderers[props.name])
-
-// 根据模式计算初始状态（工具结果完成后默认折叠，除非 mode 是 open）
-function getInitialExpanded(): boolean {
-  if (props.expandedType === 'open') return true
-  return false
-}
-
-const expanded = ref(getInitialExpanded())
-
-// 格式化结果
-const formattedResult = computed(() => {
-  if (typeof props.result === 'string') {
-    return props.result
-  }
-  return JSON.stringify(props.result, null, 2)
-})
-</script>
-
-<style scoped>
-.tool-result-part {
-  margin: 8px 0;
-}
-
-.result-content {
-  margin: 0;
-  font-size: 12px;
-  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
-  color: var(--chat-code-text, var(--chat-text-muted, #999));
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-</style>

package/src/components/message/tool-results/DefaultToolResult.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="default-tool-result">
-    <pre class="result-content">{{ formattedResult }}</pre>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { ToolRendererProps } from '@huyooo/ai-chat-shared'
-
-const props = defineProps<ToolRendererProps>()
-
-const formattedResult = computed(() => {
-  if (typeof props.toolResult === 'string') {
-    return props.toolResult
-  }
-  try {
-    return JSON.stringify(props.toolResult, null, 2)
-  } catch {
-    return String(props.toolResult)
-  }
-})
-</script>
-
-<style scoped>
-.default-tool-result {
-  background: var(--chat-bg, #1e1e1e);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.result-content {
-  margin: 0;
-  padding: 8px;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--chat-code-text, var(--chat-text, #999));
-  font-family: 'SF Mono', Monaco, monospace;
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-x: auto;
-  background: var(--chat-code-bg);
-  border-top: 1px solid var(--chat-border);
-}
-</style>

package/src/components/message/tool-results/SearchResults.vue

@@ -1,133 +0,0 @@
-<template>
-  <div class="search-results-card">
-    <div class="search-header">
-      <Icon icon="lucide:search" width="16" />
-      <span>搜索结果</span>
-      <span class="search-count">{{ results.length }} 条</span>
-    </div>
-    <div class="search-list">
-      <a
-        v-for="(item, index) in results"
-        :key="index"
-        :href="item.url"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="search-item"
-        @click.prevent="openExternal(item.url)"
-      >
-        <div class="item-title">{{ item.title }}</div>
-        <div v-if="item.snippet" class="item-snippet">{{ item.snippet }}</div>
-        <div class="item-url">{{ getDomain(item.url) }}</div>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Icon } from '@iconify/vue'
-import type { ToolRendererProps, SearchResultItem } from '@huyooo/ai-chat-shared'
-
-const props = defineProps<ToolRendererProps>()
-
-const results = computed<SearchResultItem[]>(() => {
-  const result = props.toolResult
-  if (Array.isArray(result)) {
-    return result as SearchResultItem[]
-  }
-  if (typeof result === 'object' && result !== null && 'results' in result) {
-    return (result as { results: SearchResultItem[] }).results
-  }
-  return []
-})
-
-/** 获取域名 */
-function getDomain(url: string): string {
-  try {
-    return new URL(url).hostname
-  } catch {
-    return url
-  }
-}
-
-/** 打开外部链接 */
-function openExternal(url: string) {
-  const bridge = (window as { aiChatBridge?: { openExternal: (url: string) => Promise<void> } }).aiChatBridge
-  if (bridge?.openExternal) {
-    bridge.openExternal(url)
-  } else {
-    window.open(url, '_blank')
-  }
-}
-</script>
-
-<style scoped>
-.search-results-card {
-  background: var(--chat-muted, #2d2d2d);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.search-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--chat-text-muted, #888);
-  font-size: 13px;
-}
-
-.search-count {
-  margin-left: auto;
-  font-size: 12px;
-  opacity: 0.7;
-}
-
-.search-list {
-  display: flex;
-  flex-direction: column;
-}
-
-.search-item {
-  display: block;
-  padding: 10px 12px;
-  text-decoration: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  transition: background 0.15s;
-}
-
-.search-item:last-child {
-  border-bottom: none;
-}
-
-.search-item:hover {
-  background: rgba(255, 255, 255, 0.05);
-}
-
-.item-title {
-  font-size: 14px;
-  color: var(--chat-text, #ccc);
-  font-weight: 500;
-  margin-bottom: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.item-snippet {
-  font-size: 12px;
-  color: var(--chat-text-muted, #888);
-  line-height: 1.4;
-  margin-bottom: 4px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.item-url {
-  font-size: 11px;
-  color: var(--chat-text-muted, #666);
-}
-</style>

package/src/components/message/tool-results/WeatherCard.vue

@@ -1,139 +0,0 @@
-<template>
-  <div class="weather-card">
-    <div class="weather-header">
-      <Icon icon="lucide:cloud-sun" width="24" class="weather-icon" />
-      <div class="weather-location">{{ weather.city }}</div>
-    </div>
-    <div class="weather-main">
-      <div class="weather-temp">{{ weather.temperature }}°</div>
-      <div class="weather-condition">{{ weather.condition }}</div>
-    </div>
-    <div v-if="weather.humidity || weather.wind" class="weather-details">
-      <div v-if="weather.humidity" class="weather-detail">
-        <Icon icon="lucide:droplets" width="14" />
-        <span>{{ weather.humidity }}%</span>
-      </div>
-      <div v-if="weather.wind" class="weather-detail">
-        <Icon icon="lucide:wind" width="14" />
-        <span>{{ weather.wind }}</span>
-      </div>
-    </div>
-    <!-- 预报 -->
-    <div v-if="weather.forecast?.length" class="weather-forecast">
-      <div v-for="item in weather.forecast" :key="item.date" class="forecast-item">
-        <div class="forecast-date">{{ item.date }}</div>
-        <div class="forecast-temp">{{ item.low }}° / {{ item.high }}°</div>
-        <div class="forecast-condition">{{ item.condition }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Icon } from '@iconify/vue'
-import type { ToolRendererProps, WeatherData } from '@huyooo/ai-chat-shared'
-
-const props = defineProps<ToolRendererProps>()
-
-const weather = computed<WeatherData>(() => {
-  const result = props.toolResult
-  if (typeof result === 'object' && result !== null) {
-    return result as WeatherData
-  }
-  // 默认值
-  return {
-    city: '未知',
-    temperature: 0,
-    condition: '未知',
-  }
-})
-</script>
-
-<style scoped>
-.weather-card {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 12px;
-  padding: 16px;
-  color: #fff;
-  min-width: 200px;
-}
-
-.weather-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.weather-icon {
-  opacity: 0.9;
-}
-
-.weather-location {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.weather-main {
-  margin-bottom: 12px;
-}
-
-.weather-temp {
-  font-size: 48px;
-  font-weight: 300;
-  line-height: 1;
-}
-
-.weather-condition {
-  font-size: 14px;
-  opacity: 0.9;
-  margin-top: 4px;
-}
-
-.weather-details {
-  display: flex;
-  gap: 16px;
-  padding-top: 12px;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.weather-detail {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 13px;
-  opacity: 0.9;
-}
-
-.weather-forecast {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-  display: flex;
-  gap: 12px;
-  overflow-x: auto;
-}
-
-.forecast-item {
-  text-align: center;
-  min-width: 60px;
-}
-
-.forecast-date {
-  font-size: 12px;
-  opacity: 0.8;
-  margin-bottom: 4px;
-}
-
-.forecast-temp {
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.forecast-condition {
-  font-size: 11px;
-  opacity: 0.8;
-  margin-top: 2px;
-}
-</style>

package/src/components/message/tool-results/index.ts

@@ -1,7 +0,0 @@
-/**
- * 工具结果渲染组件导出
- */
-
-export { default as DefaultToolResult } from './DefaultToolResult.vue'
-export { default as WeatherCard } from './WeatherCard.vue'
-export { default as SearchResults } from './SearchResults.vue'