@huyooo/ai-chat-frontend-react 0.2.14 → 0.2.16

package/src/styles.css

@@ -1,330 +0,0 @@
-/**
- * AI Chat 全局样式
- * 仅包含 CSS 变量和 ChatPanel 基础布局
- */
-
-/* 导入 Markdown / Mermaid 等共享渲染样式（与 vue 版本保持一致） */
-@import "@huyooo/ai-chat-shared/styles";
-
-/**
- * 主题协议（跨项目统一）：
- * - 使用 document.documentElement 的 data-theme = light | dark
- * - 默认跟随系统 prefers-color-scheme
- * - 组件内部继续使用 --chat-*（ai-chat 自己维护配色，避免被宿主 token “染色”）
- */
-
-/* 默认：浅色 */
-:root {
-  color-scheme: light;
-
-  /* ai-chat 专用变量（保持兼容） */
-  /* Cursor 官网（Light）白色主题：暖白底 + 橙色强调 */
-  --chat-bg: #f7f7f4;
-  /* header 与主背景同步，用底部分割线表达层级 */
-  --chat-header-bg: var(--chat-bg);
-  --chat-input-bg: #f0efeb;
-  --chat-dropdown-bg: #f2f1ed;
-  --chat-muted: #ebeae5;
-  --chat-muted-hover: #e6e5e0;
-  --chat-border: #26251e1a;
-  --chat-text: #26251eeb;
-  --chat-text-strong: #26251e;
-  --chat-text-muted: #26251e99;
-  /* 主色：light/dark 保持一致（蓝） */
-  --chat-primary: #54a9ff;
-  /* hover：比主色更深一档，保持可感知的交互反馈 */
-  --chat-primary-hover: #2f90ff;
-  --chat-destructive: #cf2d56;
-  --chat-destructive-hover: #b3003f;
-  --chat-success: #1f8a65;
-  --chat-code-bg: #f2f1ed;
-  --chat-code-text: #26251eeb;
-  --chat-scrollbar: rgba(38, 37, 30, 0.2);
-  --chat-scrollbar-hover: rgba(38, 37, 30, 0.3);
-  /* 悬浮圆形按钮（如 scroll-to-bottom）在浅色下更像 macOS：白底+阴影 */
-  --chat-fab-bg: #ffffff;
-  --chat-fab-bg-hover: var(--chat-input-bg);
-  --chat-fab-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
-
-  /* 代码高亮 - GitHub Light 风格 */
-  --chat-hljs-keyword: #cf222e;
-  --chat-hljs-built-in: #953800;
-  --chat-hljs-type: #953800;
-  --chat-hljs-function: #8250df;
-  --chat-hljs-string: #0a3069;
-  --chat-hljs-number: #0550ae;
-  --chat-hljs-literal: #0550ae;
-  --chat-hljs-comment: #6e7781;
-  --chat-hljs-variable: #953800;
-  --chat-hljs-attr: #0550ae;
-  --chat-hljs-property: #116329;
-  --chat-hljs-operator: #cf222e;
-  --chat-hljs-punctuation: #24292f;
-  --chat-hljs-params: #24292f;
-  --chat-hljs-regexp: #116329;
-  --chat-hljs-selector: #116329;
-  --chat-hljs-tag: #116329;
-  --chat-hljs-name: #116329;
-  --chat-hljs-deletion: #82071e;
-  --chat-hljs-deletion-bg: rgba(255, 129, 130, 0.15);
-  --chat-hljs-addition: #116329;
-  --chat-hljs-addition-bg: rgba(46, 160, 67, 0.15);
-  --chat-hljs-meta: #6e7781;
-  --chat-hljs-link: #0a3069;
-  --chat-hljs-symbol: #0550ae;
-  --chat-hljs-subst: #24292f;
-  --chat-hljs-section: #0550ae;
-  --chat-hljs-bullet: #953800;
-}
-
-/* 默认跟随系统暗色 */
-@media (prefers-color-scheme: dark) {
-  :root {
-    color-scheme: dark;
-    /* 旧版暗色（深灰底：你更喜欢的观感） */
-    --chat-bg: #1e1e1e;
-    --chat-header-bg: #1e1e1e;
-    --chat-input-bg: #2d2d2d;
-    --chat-dropdown-bg: #252526;
-    --chat-muted: #2d2d2d;
-    --chat-muted-hover: #3c3c3c;
-    --chat-border: #333;
-    --chat-text: #ccc;
-    --chat-text-strong: #fff;
-    --chat-text-muted: #888;
-    /* 主色：light/dark 保持一致（蓝） */
-    --chat-primary: #54a9ff;
-    --chat-primary-hover: #2f90ff;
-    --chat-destructive: #cf2d56;
-    --chat-destructive-hover: #e33b67;
-    --chat-success: #1f8a65;
-    --chat-code-bg: #1f2937;
-    --chat-code-text: #e5e7eb;
-    --chat-scrollbar: rgba(255, 255, 255, 0.2);
-    --chat-scrollbar-hover: rgba(255, 255, 255, 0.3);
-    /* 暗色下保持融入背景 */
-    --chat-fab-bg: var(--chat-muted);
-    --chat-fab-bg-hover: var(--chat-muted-hover);
-    --chat-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-
-    /* 代码高亮 - GitHub Dark 风格 */
-    --chat-hljs-keyword: #ff7b72;
-    --chat-hljs-built-in: #ffa657;
-    --chat-hljs-type: #ffa657;
-    --chat-hljs-function: #d2a8ff;
-    --chat-hljs-string: #a5d6ff;
-    --chat-hljs-number: #79c0ff;
-    --chat-hljs-literal: #79c0ff;
-    --chat-hljs-comment: #8b949e;
-    --chat-hljs-variable: #ffa657;
-    --chat-hljs-attr: #79c0ff;
-    --chat-hljs-property: #7ee787;
-    --chat-hljs-operator: #ff7b72;
-    --chat-hljs-punctuation: #e6edf3;
-    --chat-hljs-params: #e6edf3;
-    --chat-hljs-regexp: #7ee787;
-    --chat-hljs-selector: #7ee787;
-    --chat-hljs-tag: #7ee787;
-    --chat-hljs-name: #7ee787;
-    --chat-hljs-deletion: #ffa198;
-    --chat-hljs-deletion-bg: rgba(248, 81, 73, 0.15);
-    --chat-hljs-addition: #7ee787;
-    --chat-hljs-addition-bg: rgba(46, 160, 67, 0.15);
-    --chat-hljs-meta: #8b949e;
-    --chat-hljs-link: #a5d6ff;
-    --chat-hljs-symbol: #79c0ff;
-    --chat-hljs-subst: #e6edf3;
-    --chat-hljs-section: #79c0ff;
-    --chat-hljs-bullet: #ffa657;
-  }
-}
-
-/* 显式浅色/暗色覆盖系统 */
-:root[data-theme="light"] {
-  color-scheme: light;
-  /* 显式 light 必须覆盖 prefers-color-scheme: dark 的变量 */
-  --chat-bg: #f7f7f4;
-  --chat-header-bg: var(--chat-bg);
-  --chat-input-bg: #f0efeb;
-  --chat-dropdown-bg: #f2f1ed;
-  --chat-muted: #ebeae5;
-  --chat-muted-hover: #e6e5e0;
-  --chat-border: #26251e1a;
-  --chat-text: #26251eeb;
-  --chat-text-strong: #26251e;
-  --chat-text-muted: #26251e99;
-  --chat-primary: #54a9ff;
-  --chat-primary-hover: #2f90ff;
-  --chat-destructive: #cf2d56;
-  --chat-destructive-hover: #b3003f;
-  --chat-success: #1f8a65;
-  --chat-code-bg: #f2f1ed;
-  --chat-code-text: #26251eeb;
-  --chat-scrollbar: rgba(38, 37, 30, 0.2);
-  --chat-scrollbar-hover: rgba(38, 37, 30, 0.3);
-  --chat-fab-bg: #ffffff;
-  --chat-fab-bg-hover: var(--chat-input-bg);
-  --chat-fab-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
-
-  /* 代码高亮 - GitHub Light 风格 */
-  --chat-hljs-keyword: #cf222e;
-  --chat-hljs-built-in: #953800;
-  --chat-hljs-type: #953800;
-  --chat-hljs-function: #8250df;
-  --chat-hljs-string: #0a3069;
-  --chat-hljs-number: #0550ae;
-  --chat-hljs-literal: #0550ae;
-  --chat-hljs-comment: #6e7781;
-  --chat-hljs-variable: #953800;
-  --chat-hljs-attr: #0550ae;
-  --chat-hljs-property: #116329;
-  --chat-hljs-operator: #cf222e;
-  --chat-hljs-punctuation: #24292f;
-  --chat-hljs-params: #24292f;
-  --chat-hljs-regexp: #116329;
-  --chat-hljs-selector: #116329;
-  --chat-hljs-tag: #116329;
-  --chat-hljs-name: #116329;
-  --chat-hljs-deletion: #82071e;
-  --chat-hljs-deletion-bg: rgba(255, 129, 130, 0.15);
-  --chat-hljs-addition: #116329;
-  --chat-hljs-addition-bg: rgba(46, 160, 67, 0.15);
-  --chat-hljs-meta: #6e7781;
-  --chat-hljs-link: #0a3069;
-  --chat-hljs-symbol: #0550ae;
-  --chat-hljs-subst: #24292f;
-  --chat-hljs-section: #0550ae;
-  --chat-hljs-bullet: #953800;
-}
-
-:root[data-theme="dark"] {
-  color-scheme: dark;
-  /* 旧版暗色（深灰底：你更喜欢的观感） */
-  --chat-bg: #1e1e1e;
-  --chat-header-bg: #1e1e1e;
-  --chat-input-bg: #2d2d2d;
-  --chat-dropdown-bg: #252526;
-  --chat-muted: #2d2d2d;
-  --chat-muted-hover: #3c3c3c;
-  --chat-border: #333;
-  --chat-text: #ccc;
-  --chat-text-strong: #fff;
-  --chat-text-muted: #888;
-  /* 主色：light/dark 保持一致（蓝） */
-  --chat-primary: #54a9ff;
-  --chat-primary-hover: #2f90ff;
-  --chat-destructive: #cf2d56;
-  --chat-destructive-hover: #e33b67;
-  --chat-success: #1f8a65;
-  --chat-code-bg: #1f2937;
-  --chat-code-text: #e5e7eb;
-  --chat-scrollbar: rgba(255, 255, 255, 0.2);
-  --chat-scrollbar-hover: rgba(255, 255, 255, 0.3);
-  --chat-fab-bg: var(--chat-muted);
-  --chat-fab-bg-hover: var(--chat-muted-hover);
-  --chat-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-
-  /* 代码高亮 - GitHub Dark 风格 */
-  --chat-hljs-keyword: #ff7b72;
-  --chat-hljs-built-in: #ffa657;
-  --chat-hljs-type: #ffa657;
-  --chat-hljs-function: #d2a8ff;
-  --chat-hljs-string: #a5d6ff;
-  --chat-hljs-number: #79c0ff;
-  --chat-hljs-literal: #79c0ff;
-  --chat-hljs-comment: #8b949e;
-  --chat-hljs-variable: #ffa657;
-  --chat-hljs-attr: #79c0ff;
-  --chat-hljs-property: #7ee787;
-  --chat-hljs-operator: #ff7b72;
-  --chat-hljs-punctuation: #e6edf3;
-  --chat-hljs-params: #e6edf3;
-  --chat-hljs-regexp: #7ee787;
-  --chat-hljs-selector: #7ee787;
-  --chat-hljs-tag: #7ee787;
-  --chat-hljs-name: #7ee787;
-  --chat-hljs-deletion: #ffa198;
-  --chat-hljs-deletion-bg: rgba(248, 81, 73, 0.15);
-  --chat-hljs-addition: #7ee787;
-  --chat-hljs-addition-bg: rgba(46, 160, 67, 0.15);
-  --chat-hljs-meta: #8b949e;
-  --chat-hljs-link: #a5d6ff;
-  --chat-hljs-symbol: #79c0ff;
-  --chat-hljs-subst: #e6edf3;
-  --chat-hljs-section: #79c0ff;
-  --chat-hljs-bullet: #ffa657;
-}
-
-/* 统一滚动条样式 - 任何需要自定义滚动条的元素添加此类 */
-.chat-scrollbar::-webkit-scrollbar {
-  width: 6px;
-}
-
-.chat-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.chat-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
-  border-radius: 3px;
-}
-
-.chat-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
-}
-
-/* ChatPanel 基础布局 */
-.chat-panel {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background: var(--chat-bg, #1e1e1e);
-  overflow: hidden;
-}
-
-.messages-wrapper {
-  flex: 1;
-  min-height: 0;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.messages-container {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 12px;
-  scroll-behavior: smooth;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-/* 滚动到底部按钮 */
-.scroll-to-bottom-btn {
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: var(--chat-fab-bg, var(--chat-muted));
-  border: 1px solid var(--chat-border);
-  color: var(--chat-text-muted);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: var(--chat-fab-shadow, 0 2px 8px rgba(0, 0, 0, 0.3));
-  z-index: 10;
-  pointer-events: auto;
-}
-
-.scroll-to-bottom-btn:hover {
-  background: var(--chat-fab-bg-hover, var(--chat-muted-hover));
-  color: var(--chat-text);
-  transform: scale(1.1);
-}

package/src/types/index.ts

@@ -1,196 +0,0 @@
-/**
- * AI Chat 前端类型定义
- * 核心类型从 bridge-electron 导出，保持类型一致性
- * 
- * 架构：消息内容使用 ContentPart 数组，支持流式渲染和自定义 UI
- */
-
-// 从 bridge-electron 导入类型
-import type {
-  ChatMode as ChatModeType,
-  ThinkingMode as ThinkingModeType,
-  SessionRecord as SessionRecordType,
-  MessageRecord as MessageRecordType,
-  ModelOption as ModelOptionType,
-  ProviderType as ProviderTypeType,
-} from '@huyooo/ai-chat-bridge-electron/renderer'
-
-// 重新导出核心类型
-export type ChatMode = ChatModeType
-export type ThinkingMode = ThinkingModeType
-export type SessionRecord = SessionRecordType
-export type MessageRecord = MessageRecordType
-export type ModelOption = ModelOptionType
-export type ProviderType = ProviderTypeType
-
-// ==================== Content Part 类型 ====================
-// 
-// 架构说明：
-// 1. 内置类型：text, code, thinking, search, tool_call, image, error
-// 2. 扩展类型：weather, stock 等业务类型（通过 partRenderers 注册渲染器）
-// 3. 工具执行完成后，如果定义了 resultType，直接生成对应类型的 Part（如 weather）
-// 4. 前端通过 partRenderers 统一渲染所有 Part 类型
-
-/** 搜索结果 */
-export interface SearchResult {
-  title: string
-  url: string
-  snippet: string
-}
-
-/** 文本内容 Part */
-export interface TextPart {
-  type: 'text'
-  text: string
-}
-
-/** 代码块 Part（从 text 中解析，或直接返回）*/
-export interface CodePart {
-  type: 'code'
-  content: string
-  language?: string
-}
-
-/** 思考过程 Part */
-export interface ThinkingPart {
-  type: 'thinking'
-  text: string
-  status: 'running' | 'done'
-  duration?: number // 秒
-}
-
-/** 搜索 Part */
-export interface SearchPart {
-  type: 'search'
-  query?: string
-  results?: SearchResult[]
-  status: 'running' | 'done'
-}
-
-/** 工具调用 Part（仅展示执行过程，结果由具体类型 Part 渲染）*/
-export interface ToolCallPart {
-  type: 'tool_call'
-  id: string
-  name: string
-  args?: Record<string, unknown>
-  status: 'pending' | 'running' | 'done' | 'error' | 'cancelled' | 'skipped'
-  // 注意：不再有 result 字段，结果由工具的 resultType 指定的 Part 类型渲染
-  /** 工具执行输出（用于 execute_command 等需要展示 stdout/stderr 的工具） */
-  output?: {
-    stdout?: string
-    stderr?: string
-  }
-}
-
-/** 图片 Part */
-export interface ImagePart {
-  type: 'image'
-  url: string
-}
-
-/** 错误 Part */
-export interface ErrorPart {
-  type: 'error'
-  message: string
-  category?: string
-  retryable?: boolean
-}
-
-// ==================== 扩展 Part 类型（业务类型）====================
-
-/** 天气 Part（由 get_weather 工具生成）*/
-export interface WeatherPart {
-  type: 'weather'
-  city: string
-  temperature: number
-  condition: string
-  humidity: number
-  wind: string
-  reportTime?: string
-  province?: string
-}
-
-/** 自定义 Part 基础接口（用于扩展）*/
-export interface CustomPart {
-  type: string
-  [key: string]: unknown
-}
-
-/** 内置 Part 联合类型 */
-export type BuiltinPart =
-  | TextPart
-  | CodePart
-  | ThinkingPart
-  | SearchPart
-  | ToolCallPart
-  | ImagePart
-  | ErrorPart
-
-/** 内容 Part 联合类型（包含内置和扩展类型）*/
-export type ContentPart = BuiltinPart | WeatherPart | CustomPart
-
-/** 内置 Part 类型字符串 */
-export type BuiltinPartType = BuiltinPart['type']
-
-/** 内容 Part 类型字符串 */
-export type ContentPartType = string
-
-/** 步骤折叠模式 */
-export type StepsExpandedType = 'open' | 'close' | 'auto'
-
-// ==================== 消息类型 ====================
-
-/** 错误详情（结构化错误信息） */
-export interface ErrorDetails {
-  category?: string
-  message: string
-  code?: string
-  statusCode?: number
-  retryable?: boolean
-  retryAfter?: number
-}
-
-/** 聊天消息（前端显示用）- 新架构：基于 parts 数组 */
-export interface ChatMessage {
-  id: string
-  role: 'user' | 'assistant'
-  /** 内容 parts 数组 - 核心渲染数据 */
-  parts: ContentPart[]
-  /** 生成此消息时使用的模型 */
-  model?: string
-  /** 生成此消息时使用的模式 (ask/agent) */
-  mode?: string
-  /** 生成此消息时是否启用 web 搜索 */
-  webSearchEnabled?: boolean
-  /** 生成此消息时是否启用深度思考 */
-  thinkingEnabled?: boolean
-  /** 用户上传的图片（仅用户消息） */
-  images?: string[]
-  /** 是否正在加载 */
-  loading?: boolean
-  /** 是否已复制 */
-  copied?: boolean
-  /** 消息时间戳 */
-  timestamp?: number
-  /** 错误详情（如果有错误） */
-  error?: ErrorDetails
-  /** 是否被用户中止 */
-  aborted?: boolean
-}
-
-/** 获取消息的纯文本内容（用于复制、保存等） */
-export function getMessageText(message: ChatMessage): string {
-  return message.parts
-    .filter((p): p is TextPart => p.type === 'text')
-    .map(p => p.text)
-    .join('')
-}
-
-/** 输入区配置快照（用于历史回溯/重发） */
-export interface ChatInputOptions {
-  mode: ChatMode
-  model: string
-  webSearchEnabled: boolean
-  thinkingEnabled: boolean
-}
-

package/src/utils/fileIcon.ts

@@ -1,49 +0,0 @@
-/**
- * 根据文件名或路径获取对应的图标
- */
-export function getFileIcon(nameOrPath: string): string {
-  const name = basename(nameOrPath).toLowerCase();
-  const ext = name.includes('.') ? name.slice(name.lastIndexOf('.')) : '';
-
-  if (ext === '.vue') return 'vscode-icons:file-type-vue';
-  if (ext === '.tsx') return 'vscode-icons:file-type-reactts';
-  if (ext === '.jsx') return 'vscode-icons:file-type-reactjs';
-  if (ext === '.ts') return 'vscode-icons:file-type-typescript';
-  if (ext === '.js') return 'vscode-icons:file-type-js';
-  if (ext === '.css') return 'vscode-icons:file-type-css';
-  if (ext === '.scss' || ext === '.sass') return 'vscode-icons:file-type-scss';
-  if (ext === '.less') return 'vscode-icons:file-type-less';
-  if (ext === '.json') return 'vscode-icons:file-type-json';
-  if (ext === '.yaml' || ext === '.yml') return 'vscode-icons:file-type-yaml';
-  if (ext === '.xml') return 'vscode-icons:file-type-xml';
-  if (ext === '.md') return 'vscode-icons:file-type-markdown';
-  if (ext === '.txt') return 'vscode-icons:file-type-text';
-  if (['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.ico'].includes(ext)) {
-    return 'vscode-icons:file-type-image';
-  }
-  if (ext === '.html' || ext === '.htm') return 'vscode-icons:file-type-html';
-  if (ext === '.py') return 'vscode-icons:file-type-python';
-  if (ext === '.go') return 'vscode-icons:file-type-go';
-  if (ext === '.rs') return 'vscode-icons:file-type-rust';
-  if (ext === '.sh' || ext === '.bash' || ext === '.zsh') return 'vscode-icons:file-type-shell';
-
-  return 'lucide:file';
-}
-
-/**
- * 获取路径的文件名部分
- */
-export function basename(p: string): string {
-  const normalized = p.replace(/\\/g, '/');
-  const idx = normalized.lastIndexOf('/');
-  return idx >= 0 ? normalized.slice(idx + 1) || normalized : normalized;
-}
-
-/**
- * 获取路径的目录部分
- */
-export function dirname(p: string): string {
-  const normalized = p.replace(/\\/g, '/');
-  const idx = normalized.lastIndexOf('/');
-  return idx > 0 ? normalized.slice(0, idx) : '';
-}