@huyooo/ai-chat-frontend-react 0.2.19 → 0.2.20

package/dist/index.css

@@ -772,11 +772,11 @@
   position: relative;
   display: flex;
   align-items: center;
-  width: 100%;
   padding: 10px 16px;
   background: var(--chat-muted, #2a2a2a);
   border-radius: 8px;
   overflow: hidden;
+  box-sizing: border-box;
 }
 .loading-indicator.has-content-above {
   margin-top: 8px;
@@ -836,6 +836,64 @@
   border-radius: 10px;
   border: 1px solid var(--chat-border, #333);
 }
+.token-usage,
+.response-duration {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11px;
+  color: var(--chat-text-muted, #888);
+  cursor: default;
+}
+.token-usage {
+  position: relative;
+}
+.token-usage:hover .usage-tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0);
+}
+.usage-tooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px 10px;
+  background: var(--chat-bg, #1e1e1e);
+  border: 1px solid var(--chat-border, #444);
+  border-radius: 6px;
+  font-size: 11px;
+  color: var(--chat-text-muted, #aaa);
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.15s,
+    visibility 0.15s,
+    transform 0.15s;
+  pointer-events: none;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+.usage-tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: var(--chat-border, #444);
+}
+.usage-tooltip-total {
+  border-top: 1px solid var(--chat-border, #333);
+  padding-top: 2px;
+  margin-top: 1px;
+  color: var(--chat-text, #ccc);
+  font-weight: 500;
+}
 .action-buttons {
   display: flex;
   align-items: center;
@@ -2595,6 +2653,8 @@ body {
 /* src/components/input/DropdownSelector.css */
 .dropdown-selector {
   position: relative;
+}
+.dropdown-selector .selector-trigger {
   display: flex;
   align-items: center;
   gap: 4px;
@@ -2609,12 +2669,12 @@ body {
   cursor: pointer;
   transition: all 0.15s;
 }
-.dropdown-selector:hover:not(.disabled) {
+.dropdown-selector:not(.disabled) .selector-trigger:hover {
   background: rgba(0, 0, 0, 0.06);
   background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
   color: var(--chat-text, #ccc);
 }
-.dropdown-selector.disabled {
+.dropdown-selector.disabled .selector-trigger {
   opacity: 0.6;
   cursor: not-allowed;
 }
@@ -3079,6 +3139,79 @@ body {
   margin: 0;
 }
 
+/* src/components/message/parts/PlanPart.css */
+.plan-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 2px 0;
+}
+.plan-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--chat-text-muted, #999);
+  transition: color 0.2s ease;
+}
+.plan-step--done {
+  color: var(--chat-success, #22c55e);
+}
+.plan-step--in_progress {
+  color: var(--chat-plan-accent, #8b5cf6);
+  font-weight: 500;
+}
+.plan-step--failed {
+  color: var(--chat-error, #ef4444);
+}
+.plan-step--pending {
+  color: var(--chat-text-muted, #666);
+}
+.plan-step-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  font-size: 12px;
+}
+.plan-icon-done {
+  color: var(--chat-success, #22c55e);
+  font-weight: bold;
+}
+.plan-icon-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.plan-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--chat-plan-accent, #8b5cf6);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: plan-spin 0.8s linear infinite;
+}
+.plan-icon-failed {
+  color: var(--chat-error, #ef4444);
+  font-weight: bold;
+}
+.plan-icon-pending {
+  color: var(--chat-text-muted, #666);
+  font-size: 10px;
+}
+.plan-step-title {
+  flex: 1;
+  word-break: break-word;
+}
+@keyframes plan-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 /* src/components/message/PartsRenderer.css */
 .parts-renderer {
   display: flex;
@@ -4355,3 +4488,95 @@ body {
   color: var(--chat-text-muted, #888);
   margin-top: 8px;
 }
+.skill-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 0 8px 0;
+}
+.skill-input {
+  width: 100%;
+  padding: 8px 12px;
+  background: var(--chat-input-bg, #1e1e1e);
+  border: 1px solid var(--chat-border, #333);
+  border-radius: 6px;
+  color: var(--chat-text, #fff);
+  font-size: 13px;
+  outline: none;
+  box-sizing: border-box;
+}
+.skill-input:focus,
+.skill-textarea:focus {
+  border-color: var(--chat-primary, #4f8fff);
+}
+.skill-textarea {
+  width: 100%;
+  padding: 8px 12px;
+  background: var(--chat-input-bg, #1e1e1e);
+  border: 1px solid var(--chat-border, #333);
+  border-radius: 6px;
+  color: var(--chat-text, #fff);
+  font-size: 13px;
+  outline: none;
+  resize: vertical;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+.skill-form-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+.skill-btn {
+  padding: 6px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.skill-btn-primary {
+  background: var(--chat-primary, #4f8fff);
+  color: #fff;
+}
+.skill-btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.skill-btn-secondary {
+  background: var(--chat-border, #333);
+  color: var(--chat-text, #fff);
+}
+.skill-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.skill-action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: var(--chat-text-muted, #888);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.skill-action-btn:hover {
+  background: var(--chat-border, #333);
+  color: var(--chat-text, #fff);
+}
+.skill-action-delete:hover {
+  color: var(--chat-error, #ef4444);
+}
+.skill-badge {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 6px;
+  font-size: 11px;
+  color: var(--chat-text-muted, #888);
+  background: var(--chat-border, #333);
+  border-radius: 4px;
+}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { ChatMode as ChatMode$1, ThinkingMode, ModelOption as ModelOption$1, SessionRecord as SessionRecord$1, ChatAdapter, AutoRunConfig } from '@huyooo/ai-chat-bridge-electron/renderer';
-export { ChatAdapter, ChatEvent, ChatEventType, ChatMode, ChatOptions, MessageRecord, ModelOption, ProviderType, SessionRecord, ThinkingMode } from '@huyooo/ai-chat-bridge-electron/renderer';
+export { ChatAdapter, ChatEvent, ChatEventType, ChatMode, ChatOptions, MessageRecord, ModelOption, ProviderType, SessionRecord, ThinkingMode } from '@huyooo/ai-chat-types';
+import { ChatMode as ChatMode$1, ThinkingMode, ModelOption as ModelOption$1, SessionRecord as SessionRecord$1, ChatAdapter, AutoRunConfig, SkillRecord } from '@huyooo/ai-chat-bridge-electron/renderer';
 import * as react from 'react';
 import { FC, ReactNode, ComponentType } from 'react';
 export { CodeBlock as CodeBlockType, ContentBlock, ContentBlockType, SearchResultItem, TextBlock as TextBlockType, WeatherData, getLanguageDisplayName, highlightCode, parseContent, renderMarkdown } from '@huyooo/ai-chat-shared';
@@ -125,6 +125,18 @@ interface ErrorPart$1 {
     category?: string;
     retryable?: boolean;
 }
+/** 计划步骤 */
+interface PlanStepItem {
+    id: string;
+    title: string;
+    status: 'pending' | 'in_progress' | 'done' | 'failed';
+}
+/** 计划进度 Part（由 update_plan 工具的 resultType:'plan' 生成） */
+interface PlanPart {
+    type: 'plan';
+    steps: PlanStepItem[];
+    status: 'running' | 'done';
+}
 /** 天气 Part（由 get_weather 工具生成）*/
 interface WeatherPart {
     type: 'weather';
@@ -142,7 +154,7 @@ interface CustomPart {
     [key: string]: unknown;
 }
 /** 内置 Part 联合类型 */
-type BuiltinPart = TextPart$1 | CodePart | ThinkingPart$1 | SearchPart$1 | ToolCallPart$1 | ImagePart$1 | ErrorPart$1;
+type BuiltinPart = TextPart$1 | CodePart | ThinkingPart$1 | SearchPart$1 | ToolCallPart$1 | ImagePart$1 | ErrorPart$1 | PlanPart;
 /** 内容 Part 联合类型（包含内置和扩展类型）*/
 type ContentPart = BuiltinPart | WeatherPart | CustomPart;
 /** 内容 Part 类型字符串 */
@@ -176,6 +188,8 @@ interface ChatMessage {
     images?: string[];
     /** 是否正在加载 */
     loading?: boolean;
+    /** Agent 当前阶段（后端通过 agent_status 事件推送，thinking=显示 loading） */
+    agentPhase?: 'thinking';
     /** 是否已复制 */
     copied?: boolean;
     /** 消息时间戳 */
@@ -184,6 +198,23 @@ interface ChatMessage {
     error?: ErrorDetails;
     /** 是否被用户中止 */
     aborted?: boolean;
+    /** Token 使用统计（done 事件携带） */
+    usage?: {
+        promptTokens: number;
+        completionTokens: number;
+        totalTokens: number;
+        reasoningTokens?: number;
+        cachedTokens?: number;
+    };
+    /** 响应耗时（毫秒） */
+    duration?: number;
+    /** 计费信息（云端模式，done 后由 ai-server 返回） */
+    billing?: {
+        pointsConsumed: number;
+        remainingPoints: number;
+        costYuan?: number;
+        model?: string;
+    };
 }
 /** 获取消息的纯文本内容（用于复制、保存等） */
 declare function getMessageText(message: ChatMessage): string;
@@ -275,6 +306,9 @@ declare function useChat(options: UseChatOptions): {
         description: string;
     }[];
     saveEnabledTools: (tools: string[] | undefined) => Promise<void>;
+    skills: SkillRecord[];
+    loadSkills: () => Promise<void>;
+    toggleSkill: (id: string) => Promise<void>;
 };
 
 /**
@@ -291,6 +325,10 @@ interface ChatInputContextValue {
     isLoading: boolean;
     /** Electron adapter（用于 @ 文件选择） */
     adapter?: ChatAdapter;
+    /** Skills 列表 */
+    skills?: SkillRecord[];
+    /** 切换 Skill 启用状态 */
+    toggleSkill?: (id: string) => void;
     setMode: (value: ChatMode) => void;
     setModel: (value: string) => void;
     setWebSearch: (value: boolean) => void;
@@ -396,6 +434,14 @@ declare const ChatPanel: react.ForwardRefExoticComponent<ChatPanelProps & react.
  * 新架构：使用 ContentPart 数组渲染消息内容
  */
 
+/** Token 使用统计 */
+interface TokenUsage {
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+    reasoningTokens?: number;
+    cachedTokens?: number;
+}
 interface MessageBubbleProps {
     role: 'user' | 'assistant';
     /** 内容 parts 数组 - 新架构核心 */
@@ -408,10 +454,23 @@ interface MessageBubbleProps {
     images?: string[];
     /** 是否正在加载 */
     loading?: boolean;
+    /** Agent 当前阶段（后端推送，thinking=显示 loading） */
+    agentPhase?: 'thinking';
     /** 是否已复制 */
     copied?: boolean;
     /** 消息时间戳 */
     timestamp?: Date | string | number;
+    /** Token 使用统计 */
+    usage?: TokenUsage;
+    /** 响应耗时（毫秒） */
+    duration?: number;
+    /** 计费信息（云端模式） */
+    billing?: {
+        pointsConsumed: number;
+        remainingPoints: number;
+        costYuan?: number;
+        model?: string;
+    };
     onCopy?: () => void;
     onRegenerate?: () => void;
     /** 编辑用户消息后重新发送 */