@huyooo/ai-chat-frontend-react 0.1.6 → 0.2.0

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

@@ -0,0 +1,11 @@
+/**
+ * Part 渲染组件导出
+ */
+export { CollapsibleCard } from './CollapsibleCard'
+export { TextPart } from './TextPart'
+export { ThinkingPart } from './ThinkingPart'
+export { SearchPart } from './SearchPart'
+export { ToolCallPart } from './ToolCallPart'
+export { ToolResultPart } from './ToolResultPart'
+export { ImagePart } from './ImagePart'
+export { ErrorPart } from './ErrorPart'

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

@@ -0,0 +1,26 @@
+/**
+ * 默认工具结果渲染器
+ */
+
+import { FC, useMemo } from 'react'
+import type { ToolRendererProps } from '@huyooo/ai-chat-shared'
+import './tool-results.css'
+
+export const DefaultToolResult: FC<ToolRendererProps> = ({ toolResult }) => {
+  const formattedResult = useMemo(() => {
+    if (typeof toolResult === 'string') {
+      return toolResult
+    }
+    try {
+      return JSON.stringify(toolResult, null, 2)
+    } catch {
+      return String(toolResult)
+    }
+  }, [toolResult])
+
+  return (
+    <div className="default-tool-result">
+      <pre className="result-content">{formattedResult}</pre>
+    </div>
+  )
+}

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

@@ -0,0 +1,69 @@
+/**
+ * 搜索结果渲染器
+ */
+
+import { FC, useMemo, useCallback } from 'react'
+import { Icon } from '@iconify/react'
+import type { ToolRendererProps, SearchResultItem } from '@huyooo/ai-chat-shared'
+import './tool-results.css'
+
+export const SearchResults: FC<ToolRendererProps> = ({ toolResult }) => {
+  const results = useMemo<SearchResultItem[]>(() => {
+    if (Array.isArray(toolResult)) {
+      return toolResult as SearchResultItem[]
+    }
+    if (typeof toolResult === 'object' && toolResult !== null && 'results' in toolResult) {
+      return (toolResult as { results: SearchResultItem[] }).results
+    }
+    return []
+  }, [toolResult])
+
+  /** 获取域名 */
+  const getDomain = useCallback((url: string): string => {
+    try {
+      return new URL(url).hostname
+    } catch {
+      return url
+    }
+  }, [])
+
+  /** 打开外部链接 */
+  const openExternal = useCallback((url: string) => {
+    const bridge = (window as { aiChatBridge?: { openExternal: (url: string) => Promise<void> } })
+      .aiChatBridge
+    if (bridge?.openExternal) {
+      bridge.openExternal(url)
+    } else {
+      window.open(url, '_blank')
+    }
+  }, [])
+
+  return (
+    <div className="search-results-card">
+      <div className="search-header">
+        <Icon icon="lucide:search" width={16} />
+        <span>搜索结果</span>
+        <span className="search-count">{results.length} 条</span>
+      </div>
+      <div className="search-list">
+        {results.map((item, index) => (
+          <a
+            key={index}
+            href={item.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="search-item"
+            onClick={(e) => {
+              e.preventDefault()
+              openExternal(item.url)
+            }}
+          >
+            <div className="item-title">{item.title}</div>
+            {item.snippet && <div className="item-snippet">{item.snippet}</div>}
+            <div className="item-url">{getDomain(item.url)}</div>
+          </a>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,63 @@
+/**
+ * 天气卡片渲染器
+ */
+
+import { FC, useMemo } from 'react'
+import { Icon } from '@iconify/react'
+import type { ToolRendererProps, WeatherData } from '@huyooo/ai-chat-shared'
+import './tool-results.css'
+
+export const WeatherCard: FC<ToolRendererProps> = ({ toolResult }) => {
+  const weather = useMemo<WeatherData>(() => {
+    if (typeof toolResult === 'object' && toolResult !== null) {
+      return toolResult as WeatherData
+    }
+    return {
+      city: '未知',
+      temperature: 0,
+      condition: '未知',
+    }
+  }, [toolResult])
+
+  return (
+    <div className="weather-card">
+      <div className="weather-header">
+        <Icon icon="lucide:cloud-sun" width={24} className="weather-icon" />
+        <div className="weather-location">{weather.city}</div>
+      </div>
+      <div className="weather-main">
+        <div className="weather-temp">{weather.temperature}°</div>
+        <div className="weather-condition">{weather.condition}</div>
+      </div>
+      {(weather.humidity || weather.wind) && (
+        <div className="weather-details">
+          {weather.humidity && (
+            <div className="weather-detail">
+              <Icon icon="lucide:droplets" width={14} />
+              <span>{weather.humidity}%</span>
+            </div>
+          )}
+          {weather.wind && (
+            <div className="weather-detail">
+              <Icon icon="lucide:wind" width={14} />
+              <span>{weather.wind}</span>
+            </div>
+          )}
+        </div>
+      )}
+      {weather.forecast?.length ? (
+        <div className="weather-forecast">
+          {weather.forecast.map((item) => (
+            <div key={item.date} className="forecast-item">
+              <div className="forecast-date">{item.date}</div>
+              <div className="forecast-temp">
+                {item.low}° / {item.high}°
+              </div>
+              <div className="forecast-condition">{item.condition}</div>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}

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

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

package/src/components/message/tool-results/tool-results.css

@@ -0,0 +1,179 @@
+/**
+ * 工具结果渲染器共享样式
+ */
+
+/* 默认工具结果 */
+.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-text-muted, #999);
+  font-family: "SF Mono", Monaco, monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
+}
+
+/* 天气卡片 */
+.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;
+}
+
+/* 搜索结果卡片 */
+.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);
+}

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

@@ -0,0 +1,46 @@
+/** 功能项 */
+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' },
+  ],
+};

package/src/context/AutoRunConfigContext.tsx

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react'
+import type { AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer'
+
+export interface AutoRunConfigContextValue {
+  autoRunConfig: AutoRunConfig
+  saveAutoRunConfig: (config: AutoRunConfig) => Promise<void>
+}
+
+export const AutoRunConfigContext = createContext<AutoRunConfigContextValue | null>(null)
+
+export function useAutoRunConfig(): AutoRunConfigContextValue | null {
+  return useContext(AutoRunConfigContext)
+}

package/src/context/ChatAdapterContext.tsx

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react'
+import type { ChatAdapter } from '../adapter'
+
+export const ChatAdapterContext = createContext<ChatAdapter | null>(null)
+
+export function useChatAdapter(): ChatAdapter | null {
+  return useContext(ChatAdapterContext)
+}

package/src/context/ChatInputContext.tsx

@@ -0,0 +1,40 @@
+/**
+ * 全局 ChatInput 状态 Context
+ * 用于在 MessageBubble 中的 ChatInput 共享和修改全局状态
+ */
+
+import { createContext, useContext, type ReactNode, type FC } from 'react'
+import type { ChatMode, ModelOption } from '../types'
+import type { ChatAdapter } from '@huyooo/ai-chat-bridge-electron/renderer'
+
+export interface ChatInputContextValue {
+  mode: ChatMode
+  model: string
+  models: ModelOption[]
+  webSearch: boolean
+  thinking: boolean
+  isLoading: boolean
+  /** Electron adapter（用于 @ 文件选择） */
+  adapter?: ChatAdapter
+  // cwd 已解耦，不再通过 context 传递
+  // FileBrowser 会直接通过 adapter.setCwd() 同步到 Agent
+  setMode: (value: ChatMode) => void
+  setModel: (value: string) => void
+  setWebSearch: (value: boolean) => void
+  setThinking: (value: boolean) => void
+}
+
+const ChatInputContext = createContext<ChatInputContextValue | null>(null)
+
+interface ChatInputProviderProps {
+  value: ChatInputContextValue
+  children: ReactNode
+}
+
+export const ChatInputProvider: FC<ChatInputProviderProps> = ({ value, children }) => {
+  return <ChatInputContext.Provider value={value}>{children}</ChatInputContext.Provider>
+}
+
+export function useChatInputContext(): ChatInputContextValue | null {
+  return useContext(ChatInputContext)
+}

package/src/context/RenderersContext.tsx

@@ -0,0 +1,41 @@
+/**
+ * 渲染器上下文
+ * 用于注入自定义块渲染器和工具结果渲染器
+ */
+
+import { createContext, type ComponentType, type ReactNode, type FC } from 'react'
+import type { ContentBlock, ToolRendererProps } from '@huyooo/ai-chat-shared'
+
+/** 块渲染器映射 */
+export type BlockRenderers = Record<string, ComponentType<{ block: ContentBlock }>>
+
+/** 工具结果渲染器映射 */
+export type ToolRenderers = Record<string, ComponentType<ToolRendererProps>>
+
+/** 块渲染器上下文 */
+export const BlockRenderersContext = createContext<BlockRenderers>({})
+
+/** 工具结果渲染器上下文 */
+export const ToolRenderersContext = createContext<ToolRenderers>({})
+
+/** 渲染器 Provider Props */
+interface RenderersProviderProps {
+  blockRenderers?: BlockRenderers
+  toolRenderers?: ToolRenderers
+  children: ReactNode
+}
+
+/** 渲染器 Provider */
+export const RenderersProvider: FC<RenderersProviderProps> = ({
+  blockRenderers = {},
+  toolRenderers = {},
+  children,
+}) => {
+  return (
+    <BlockRenderersContext.Provider value={blockRenderers}>
+      <ToolRenderersContext.Provider value={toolRenderers}>
+        {children}
+      </ToolRenderersContext.Provider>
+    </BlockRenderersContext.Provider>
+  )
+}