@huyooo/ai-chat-frontend-vue 0.1.6 → 0.1.7

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

@@ -0,0 +1,133 @@
+<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

@@ -0,0 +1,139 @@
+<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

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

package/src/components/message/welcome-types.ts

@@ -0,0 +1,47 @@
+/** 功能项 */
+export interface WelcomeFeature {
+  name: string;
+  icon: string;
+}
+
+/** 快捷任务 */
+export interface WelcomeTask {
+  name: string;
+  desc: string;
+  prompt: string;
+  icon: string;
+}
+
+/** 欢迎页配置 */
+export interface WelcomeConfig {
+  /** 标题 */
+  title: string;
+  /** 副标题 */
+  subtitle: string;
+  /** 图标 */
+  icon: string;
+  /** 功能列表 */
+  features: WelcomeFeature[];
+  /** 快捷任务 */
+  tasks: WelcomeTask[];
+}
+
+/** 默认配置 */
+export const defaultWelcomeConfig: WelcomeConfig = {
+  title: 'AI 助手',
+  subtitle: '智能对话 · 文档分析 · 内容创作',
+  icon: 'lucide:sparkles',
+  features: [
+    { name: '上下文引用', icon: 'lucide:at-sign' },
+    { name: '图片分析', icon: 'lucide:image' },
+    { name: '深度思考', icon: 'lucide:sparkles' },
+    { name: '联网搜索', icon: 'lucide:globe' },
+  ],
+  tasks: [
+    { name: '总结内容', desc: '快速总结文档要点', prompt: '帮我总结一下这段内容的主要要点', icon: 'lucide:file-text' },
+    { name: '翻译文本', desc: '多语言翻译助手', prompt: '帮我翻译这段文字', icon: 'lucide:languages' },
+    { name: '写作助手', desc: '帮助撰写文章', prompt: '帮我写一篇关于以下主题的文章：', icon: 'lucide:pen-tool' },
+    { name: '问答对话', desc: '回答各种问题', prompt: '我想了解一下：', icon: 'lucide:message-circle' },
+  ],
+};
+