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

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

@@ -0,0 +1,98 @@
+<template>
+  <div class="image-part">
+    <img 
+      v-if="!error"
+      :src="url" 
+      :alt="alt || '图片'"
+      class="image-content"
+      :style="{ display: loading ? 'none' : 'block' }"
+      @click="openPreview"
+      @load="onLoad"
+      @error="onError"
+    />
+    <div v-if="loading && !error" class="image-loading">
+      <Icon icon="lucide:loader-2" width="24" class="spinning" />
+    </div>
+    <div v-if="error" class="image-error">
+      <Icon icon="lucide:image-off" width="24" />
+      <span>图片加载失败</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Icon } from '@iconify/vue'
+
+const props = defineProps<{
+  url: string
+  alt?: string
+}>()
+
+const loading = ref(true)
+const error = ref(false)
+
+function onLoad() {
+  loading.value = false
+  error.value = false
+}
+
+function onError() {
+  loading.value = false
+  error.value = true
+}
+
+function openPreview() {
+  // 在新窗口打开图片
+  window.open(props.url, '_blank')
+}
+</script>
+
+<style scoped>
+.image-part {
+  position: relative;
+  margin: 8px 0;
+  max-width: 100%;
+  display: inline-block;
+}
+
+.image-content {
+  max-width: 100%;
+  max-height: 400px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.image-content:hover {
+  opacity: 0.9;
+}
+
+.image-loading,
+.image-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  background: var(--chat-muted, #2a2a2a);
+  border-radius: 8px;
+  color: var(--chat-text-muted, #888);
+  min-width: 200px;
+  min-height: 150px;
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.image-error span {
+  font-size: 13px;
+}
+</style>

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

@@ -0,0 +1,101 @@
+<template>
+  <CollapsibleCard
+    v-model="expanded"
+    icon="lucide:search"
+    icon-color="var(--chat-accent, #3b82f6)"
+    :title="status === 'running' ? '搜索中...' : `搜索完成 (${results?.length || 0} 条结果)`"
+    :spinning="status === 'running'"
+  >
+    <div v-if="results?.length" class="search-results">
+      <a 
+        v-for="(item, i) in results" 
+        :key="i" 
+        :href="item.url" 
+        target="_blank"
+        class="search-item"
+      >
+        <div class="search-item-title">{{ item.title }}</div>
+        <div class="search-item-snippet">{{ item.snippet }}</div>
+        <div class="search-item-url">{{ item.url }}</div>
+      </a>
+    </div>
+  </CollapsibleCard>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import CollapsibleCard from './CollapsibleCard.vue'
+import type { SearchResult, StepsExpandedType } from '../../../types'
+
+const props = withDefaults(defineProps<{
+  query?: string
+  results?: SearchResult[]
+  status: 'running' | 'done'
+  expandedType?: StepsExpandedType
+}>(), {
+  expandedType: 'auto'
+})
+
+// 根据模式计算初始状态
+function getInitialExpanded(): boolean {
+  if (props.expandedType === 'open') return true
+  if (props.expandedType === 'close') return false
+  return props.status === 'running'
+}
+
+const expanded = ref(getInitialExpanded())
+
+// auto 模式下：状态变化时自动折叠/展开
+watch(() => props.status, (newStatus) => {
+  if (props.expandedType === 'auto') {
+    expanded.value = newStatus === 'running'
+  }
+})
+</script>
+
+<style scoped>
+.search-results {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.search-item {
+  display: block;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--chat-bg, #1e1e1e);
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.search-item:hover {
+  background: var(--chat-hover, #333);
+}
+
+.search-item-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--chat-accent, #3b82f6);
+  margin-bottom: 4px;
+}
+
+.search-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;
+}
+
+.search-item-url {
+  font-size: 11px;
+  color: var(--chat-text-muted, #666);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

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

@@ -0,0 +1,28 @@
+<template>
+  <div 
+    v-if="text" 
+    class="text-part markdown-content"
+    v-html="html"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { renderMarkdown } from '@huyooo/ai-chat-shared'
+
+const props = defineProps<{
+  text: string
+}>()
+
+const html = computed(() => renderMarkdown(props.text))
+</script>
+
+<style scoped>
+.text-part {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--chat-text, #ccc);
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+</style>

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

@@ -0,0 +1,54 @@
+<template>
+  <CollapsibleCard
+    v-model="expanded"
+    icon="lucide:lightbulb"
+    icon-color="var(--chat-accent, #f59e0b)"
+    :title="status === 'running' ? '思考中...' : '思考完成'"
+    :subtitle="duration && status === 'done' ? `(${duration}s)` : undefined"
+  >
+    <div class="thinking-content">{{ text }}</div>
+  </CollapsibleCard>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import CollapsibleCard from './CollapsibleCard.vue'
+import type { StepsExpandedType } from '../../../types'
+
+const props = withDefaults(defineProps<{
+  text: string
+  status: 'running' | 'done'
+  duration?: number
+  expandedType?: StepsExpandedType
+}>(), {
+  expandedType: 'auto'
+})
+
+// 根据模式计算初始状态
+function getInitialExpanded(): boolean {
+  if (props.expandedType === 'open') return true
+  if (props.expandedType === 'close') return false
+  return props.status === 'running'
+}
+
+const expanded = ref(getInitialExpanded())
+
+// auto 模式下：状态变化时自动折叠/展开
+watch(() => props.status, (newStatus) => {
+  if (props.expandedType === 'auto') {
+    expanded.value = newStatus === 'running'
+  }
+})
+</script>
+
+<style scoped>
+.thinking-content {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--chat-text-muted, #999);
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  margin: 0;
+}
+</style>