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

package/src/components/common/SettingsPanel.css

@@ -1,337 +0,0 @@
-.settings-panel-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.settings-panel {
-  background: var(--chat-bg, #1e1e1e);
-  border: 1px solid var(--chat-border, #333);
-  border-radius: 12px;
-  width: 90%;
-  max-width: 900px;
-  height: 80vh;
-  max-height: 700px;
-  display: flex;
-  flex-direction: row;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-}
-
-/* 左侧导航 - shadcn 风格 */
-.settings-sidebar {
-  width: 240px;
-  background: var(--chat-muted, #2a2a2a);
-  border-right: 1px solid var(--chat-border, #333);
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-}
-
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  height: 50px;
-  padding: 0 16px;
-  border-bottom: 1px solid var(--chat-border, #333);
-}
-
-.sidebar-title {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--chat-text, #fff);
-  letter-spacing: 0.2px;
-  line-height: 1;
-}
-
-.sidebar-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px;
-}
-
-.sidebar-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  padding: 10px 12px;
-  margin-bottom: 2px;
-  background: transparent;
-  border: none;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--chat-text-muted, #888);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  text-align: left;
-  position: relative;
-}
-
-.sidebar-item:hover {
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--chat-text, #ccc);
-}
-
-.sidebar-item.active {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--chat-text, #fff);
-}
-
-/* 右侧内容 */
-.settings-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.content-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 50px;
-  padding: 0 16px;
-  border-bottom: 1px solid var(--chat-border, #333);
-}
-
-.content-title {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--chat-text, #fff);
-  letter-spacing: 0.2px;
-  line-height: 1;
-}
-
-.close-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: var(--chat-text-muted, #888);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.close-btn:hover {
-  background: var(--chat-muted, #2a2a2a);
-  color: var(--chat-text, #fff);
-}
-
-.content-body {
-  flex: 1;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 0 16px;
-}
-
-.setting-section {
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--chat-text, #fff);
-  margin-bottom: 4px;
-}
-
-.section-description {
-  font-size: 13px;
-  color: var(--chat-text-muted, #888);
-  margin-bottom: 16px;
-}
-
-.setting-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 0;
-  border-bottom: 1px solid var(--chat-border, #333);
-}
-
-.setting-item:last-child {
-  border-bottom: none;
-}
-
-.setting-info {
-  flex: 1;
-  margin-right: 24px;
-}
-
-.setting-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--chat-text, #fff);
-  margin-bottom: 4px;
-}
-
-.setting-description {
-  font-size: 13px;
-  color: var(--chat-text-muted, #888);
-  line-height: 1.5;
-}
-
-.setting-control {
-  flex-shrink: 0;
-}
-
-.dropdown-wrapper {
-  /* min-width: 280px; */
-}
-
-.dropdown-wrapper .dropdown-selector .selector-text {
-  max-width: none;
-  white-space: nowrap;
-}
-
-/* 开关样式 */
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 44px;
-  height: 24px;
-  cursor: pointer;
-}
-
-.toggle-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggle-slider {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--chat-muted, #3c3c3c);
-  border-radius: 24px;
-  transition: all 0.2s;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.toggle-slider:before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 3px;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: #fff;
-  border-radius: 50%;
-  transition: all 0.2s;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-
-.toggle-switch input:checked + .toggle-slider {
-  background-color: rgb(153, 207, 140);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.toggle-switch input:checked + .toggle-slider:before {
-  transform: translate(20px, -50%);
-}
-
-.toggle-switch input:focus + .toggle-slider {
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
-}
-
-/* 工具管理 */
-.setting-section-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 16px 0 8px;
-  border-bottom: 1px solid var(--chat-border, #333);
-}
-
-.disable-all-btn {
-  flex-shrink: 0;
-  height: 32px;
-  padding: 0 12px;
-  border-radius: 8px;
-  border: 1px solid var(--chat-border, #333);
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--chat-text, #fff);
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.disable-all-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.disable-all-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.tools-list {
-  display: flex;
-  flex-direction: column;
-}
-
-.tool-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 14px 0;
-  border-bottom: 1px solid var(--chat-border, #333);
-}
-
-.tool-item:last-child {
-  border-bottom: none;
-}
-
-.tool-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.tool-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--chat-text, #fff);
-  margin-bottom: 4px;
-  word-break: break-all;
-}
-
-.tool-description {
-  font-size: 13px;
-  color: var(--chat-text-muted, #888);
-  line-height: 1.5;
-  word-break: break-word;
-}
-
-.no-tools {
-  padding: 16px 0;
-  color: var(--chat-text, #fff);
-}
-
-.no-tools-hint {
-  font-size: 12px;
-  color: var(--chat-text-muted, #888);
-  margin-top: 8px;
-}

package/src/components/common/SettingsPanel.tsx

@@ -1,215 +0,0 @@
-/**
- * 设置面板组件
- * 用于配置 AutoRunConfig
- */
-
-import { useState, useCallback, useMemo } from 'react'
-import { Icon } from '@iconify/react'
-import type { AutoRunConfig, AutoRunMode } from '@huyooo/ai-chat-bridge-electron/renderer'
-import { DropdownSelector, type DropdownOption } from '../input/DropdownSelector'
-import { ToggleSwitch } from './ToggleSwitch'
-import { IndexingSettings } from './IndexingSettings'
-import './SettingsPanel.css'
-
-interface SettingsPanelProps {
-  visible: boolean
-  config: AutoRunConfig
-  /** 所有可用工具列表（用于工具管理） */
-  allTools?: Array<{ name: string; description: string }>
-  /** 启用的工具名称列表（undefined 表示全部启用） */
-  enabledTools?: string[] | undefined
-  /** 更新工具开关（持久化由上层处理） */
-  onUpdateEnabledTools?: (tools: string[] | undefined) => void
-  onClose: () => void
-  onChange: (config: AutoRunConfig) => void
-}
-
-const sections = [
-  { id: 'agent', label: 'Agent', icon: 'solar:link-round-angle-line-duotone' },
-  { id: 'indexing', label: '索引与文档', icon: 'lucide:database' },
-] as const
-
-export function SettingsPanel({ visible, config, allTools, enabledTools, onUpdateEnabledTools, onClose, onChange }: SettingsPanelProps) {
-  const [currentSection, setCurrentSection] = useState<string>('agent')
-
-  const currentSectionLabel = useMemo(
-    () => sections.find(s => s.id === currentSection)?.label ?? '',
-    [currentSection]
-  )
-
-  // 模式选项
-  const modeOptions: DropdownOption[] = [
-    { value: 'run-everything', label: '运行所有内容（自动执行）' },
-    { value: 'manual', label: '手动批准（每次执行前询问）' },
-  ]
-
-  /** 更新配置项 */
-  const updateConfig = useCallback(<K extends keyof AutoRunConfig>(key: K, value: AutoRunConfig[K]) => {
-    onChange({ ...config, [key]: value })
-  }, [config, onChange])
-
-  /** 处理模式变化 */
-  const handleModeChange = useCallback((value: string) => {
-    updateConfig('mode', value as AutoRunMode)
-  }, [updateConfig])
-
-  /** 处理遮罩点击 */
-  const handleOverlayClick = useCallback((e: React.MouseEvent) => {
-    if (e.target === e.currentTarget) {
-      onClose()
-    }
-  }, [onClose])
-
-  const allToolNames = useMemo(() => (allTools ?? []).map((t) => t.name), [allTools])
-
-  /** 判断工具是否启用 */
-  const isToolEnabled = useCallback((toolName: string): boolean => {
-    // undefined 表示全部启用
-    if (enabledTools === undefined) return true
-    return enabledTools.includes(toolName)
-  }, [enabledTools])
-
-  /** 处理工具开关切换 */
-  const handleToolToggle = useCallback((toolName: string, checked: boolean) => {
-    if (!onUpdateEnabledTools) return
-
-    // undefined = 全部启用
-    if (enabledTools === undefined) {
-      if (checked) return
-      onUpdateEnabledTools(allToolNames.filter((n) => n !== toolName))
-      return
-    }
-
-    const set = new Set(enabledTools)
-    if (checked) set.add(toolName)
-    else set.delete(toolName)
-
-    // 如果全部启用，回到 undefined（更符合默认语义）
-    if (allToolNames.length > 0 && set.size === allToolNames.length) {
-      onUpdateEnabledTools(undefined)
-      return
-    }
-
-    onUpdateEnabledTools(Array.from(set))
-  }, [enabledTools, allToolNames, onUpdateEnabledTools])
-
-  /** 一键禁用所有工具 */
-  const handleDisableAllTools = useCallback(() => {
-    onUpdateEnabledTools?.([])
-  }, [onUpdateEnabledTools])
-
-  const isAllToolsDisabled = useMemo(
-    () => enabledTools !== undefined && enabledTools.length === 0,
-    [enabledTools]
-  )
-
-  const handleEnableAllTools = useCallback(() => {
-    // 恢复默认：undefined 表示全部启用
-    onUpdateEnabledTools?.(undefined)
-  }, [onUpdateEnabledTools])
-
-  if (!visible) return null
-
-  return (
-    <div className="settings-panel-overlay" onClick={handleOverlayClick}>
-      <div className="settings-panel">
-        {/* 左侧导航 */}
-        <div className="settings-sidebar">
-          <div className="sidebar-header">
-            <h3 className="sidebar-title">设置</h3>
-          </div>
-          <div className="sidebar-content">
-            {sections.map((section) => (
-              <button
-                key={section.id}
-                className={`sidebar-item${currentSection === section.id ? ' active' : ''}`}
-                onClick={() => setCurrentSection(section.id)}
-              >
-                <Icon icon={section.icon} width={18} />
-                <span>{section.label}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* 右侧内容 */}
-        <div className="settings-content">
-          <div className="content-header">
-            <h2 className="content-title">{currentSectionLabel}</h2>
-            <button className="close-btn" onClick={onClose}>
-              <Icon icon="lucide:x" width={20} />
-            </button>
-          </div>
-          <div className="content-body">
-            {/* Agent 设置 */}
-            {currentSection === 'agent' && (
-              <>
-                {/* 自动运行模式 */}
-                <div className="setting-item">
-                  <div className="setting-info">
-                    <div className="setting-label">自动运行模式</div>
-                    <div className="setting-description">控制工具执行的自动运行行为</div>
-                  </div>
-                  <div className="setting-control">
-                    <DropdownSelector
-                      value={config.mode ?? 'run-everything'}
-                      options={modeOptions}
-                      align="right"
-                      onSelect={handleModeChange}
-                    />
-                  </div>
-                </div>
-
-                {/* 工具管理 */}
-                <div className="setting-section">
-                  <div className="setting-section-header">
-                    <div className="setting-info">
-                      <div className="setting-label">工具管理</div>
-                      <div className="setting-description">控制哪些工具可以被 AI 使用</div>
-                    </div>
-                    <button
-                      className="disable-all-btn"
-                      onClick={isAllToolsDisabled ? handleEnableAllTools : handleDisableAllTools}
-                      disabled={!allTools?.length}
-                    >
-                      {isAllToolsDisabled ? '启用所有工具' : '禁用所有工具'}
-                    </button>
-                  </div>
-
-                  <div className="tools-list">
-                    {allTools && allTools.length > 0 ? (
-                      allTools.map((tool) => (
-                        <div key={tool.name} className="tool-item">
-                          <div className="tool-info">
-                            <div className="tool-name">{tool.name}</div>
-                            <div className="tool-description">{tool.description}</div>
-                          </div>
-                          <ToggleSwitch
-                            checked={isToolEnabled(tool.name)}
-                            onChange={(checked) => handleToolToggle(tool.name, checked)}
-                          />
-                        </div>
-                      ))
-                    ) : (
-                      <div className="no-tools">
-                        <div>暂无可用工具</div>
-                        <div className="no-tools-hint">
-                          工具需要在创建 Electron Bridge 时通过 <code>tools</code> 参数注入
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </>
-            )}
-
-            {/* 索引与文档设置 */}
-            {currentSection === 'indexing' && (
-              <IndexingSettings />
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/common/Toast.css

@@ -1,50 +0,0 @@
-.toast-container {
-  position: fixed;
-  top: 60px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10000;
-  pointer-events: none;
-  animation: toast-in 0.2s ease;
-}
-
-.toast {
-  padding: 8px 16px;
-  border-radius: 6px;
-  font-size: 13px;
-  border: 1px solid;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-/* 正常/成功 - 灰色 */
-.toast-info,
-.toast-success {
-  background: var(--chat-bg-secondary, #2a2a2a);
-  color: var(--chat-text, #fff);
-  border-color: var(--chat-border, #444);
-}
-
-/* 警告 - 黄色 */
-.toast-warning {
-  background: rgba(245, 158, 11, 0.15);
-  color: #f59e0b;
-  border-color: rgba(245, 158, 11, 0.3);
-}
-
-/* 错误 - 红色 */
-.toast-error {
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
-  border-color: rgba(239, 68, 68, 0.3);
-}
-
-@keyframes toast-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}

package/src/components/common/Toast.tsx

@@ -1,38 +0,0 @@
-import { FC, useEffect } from 'react'
-import { createPortal } from 'react-dom'
-import './Toast.css'
-
-interface ToastProps {
-  visible: boolean
-  message: string
-  type?: 'info' | 'success' | 'warning' | 'error'
-  duration?: number
-  onClose: () => void
-}
-
-export const Toast: FC<ToastProps> = ({
-  visible,
-  message,
-  type = 'info',
-  duration = 2000,
-  onClose,
-}) => {
-  // 自动关闭
-  useEffect(() => {
-    if (visible && duration > 0) {
-      const timer = setTimeout(() => {
-        onClose()
-      }, duration)
-      return () => clearTimeout(timer)
-    }
-  }, [visible, duration, onClose])
-
-  if (!visible) return null
-
-  return createPortal(
-    <div className="toast-container">
-      <div className={`toast toast-${type}`}>{message}</div>
-    </div>,
-    document.body
-  )
-}

package/src/components/common/ToggleSwitch.css

@@ -1,52 +0,0 @@
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 44px;
-  height: 24px;
-  cursor: pointer;
-}
-
-.toggle-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggle-slider {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--chat-muted, #3c3c3c);
-  border-radius: 24px;
-  transition: all 0.2s;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.toggle-slider::before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 3px;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: #fff;
-  border-radius: 50%;
-  transition: all 0.2s;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-
-.toggle-switch input:checked + .toggle-slider {
-  background-color: rgb(153, 207, 140);
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.toggle-switch input:checked + .toggle-slider::before {
-  transform: translate(20px, -50%);
-}
-
-.toggle-switch input:focus + .toggle-slider {
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
-}

package/src/components/common/ToggleSwitch.tsx

@@ -1,20 +0,0 @@
-import type { FC } from 'react'
-import './ToggleSwitch.css'
-
-interface ToggleSwitchProps {
-  checked?: boolean
-  onChange: (value: boolean) => void
-}
-
-export const ToggleSwitch: FC<ToggleSwitchProps> = ({ checked = false, onChange }) => {
-  return (
-    <label className="toggle-switch">
-      <input
-        type="checkbox"
-        checked={checked}
-        onChange={(e) => onChange(e.target.checked)}
-      />
-      <span className="toggle-slider"></span>
-    </label>
-  )
-}