@yancyyu/openhermit 1.5.8

package/src/renderer/components/search/SearchBar.tsx

@@ -0,0 +1,171 @@
+/**
+ * SearchBar - In-session search interface component.
+ * Appears at the top of the chat view when Cmd+F is pressed.
+ *
+ * Uses a local input state with debouncing to avoid triggering expensive
+ * search on every keystroke.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { useStore } from '@renderer/store';
+import { ChevronDown, ChevronUp, X } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+const SEARCH_DEBOUNCE_MS = 300;
+
+interface SearchBarProps {
+  tabId?: string;
+}
+
+export const SearchBar = ({ tabId }: SearchBarProps): React.JSX.Element | null => {
+  const {
+    searchQuery,
+    searchVisible,
+    searchResultCount,
+    currentSearchIndex,
+    searchResultsCapped,
+    conversation,
+    setSearchQuery,
+    hideSearch,
+    nextSearchResult,
+    previousSearchResult,
+  } = useStore(
+    useShallow((s) => ({
+      searchQuery: s.searchQuery,
+      searchVisible: s.searchVisible,
+      searchResultCount: s.searchResultCount,
+      currentSearchIndex: s.currentSearchIndex,
+      searchResultsCapped: s.searchResultsCapped,
+      conversation: tabId
+        ? (s.tabSessionData[tabId]?.conversation ?? s.conversation)
+        : s.conversation,
+      setSearchQuery: s.setSearchQuery,
+      hideSearch: s.hideSearch,
+      nextSearchResult: s.nextSearchResult,
+      previousSearchResult: s.previousSearchResult,
+    }))
+  );
+
+  // Local input value for responsive typing — debounced before triggering search
+  const [localQuery, setLocalQuery] = useState(searchQuery);
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>(
+    0 as unknown as ReturnType<typeof setTimeout>
+  );
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync local state when store query changes externally (e.g., hideSearch clears it)
+  useEffect(() => {
+    setLocalQuery(searchQuery);
+  }, [searchQuery]);
+
+  // Debounced search dispatch
+  const handleChange = useCallback(
+    (value: string) => {
+      setLocalQuery(value);
+      clearTimeout(debounceRef.current);
+
+      // Clear immediately when input is emptied
+      if (!value.trim()) {
+        setSearchQuery('', conversation);
+        return;
+      }
+
+      debounceRef.current = setTimeout(() => {
+        setSearchQuery(value, conversation);
+      }, SEARCH_DEBOUNCE_MS);
+    },
+    [conversation, setSearchQuery]
+  );
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => clearTimeout(debounceRef.current);
+  }, []);
+
+  // Auto-focus input when search becomes visible
+  useEffect(() => {
+    if (searchVisible && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [searchVisible]);
+
+  // Handle keyboard shortcuts within search bar
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === 'Escape') {
+      hideSearch();
+    } else if (e.key === 'Enter') {
+      // Flush any pending debounce immediately on Enter
+      clearTimeout(debounceRef.current);
+      if (localQuery !== searchQuery) {
+        setSearchQuery(localQuery, conversation);
+      }
+      if (e.shiftKey) {
+        previousSearchResult();
+      } else {
+        nextSearchResult();
+      }
+    }
+  };
+
+  if (!searchVisible) {
+    return null;
+  }
+
+  const resultLabel = searchResultsCapped
+    ? `${currentSearchIndex + 1} of ${searchResultCount}+`
+    : `${currentSearchIndex + 1} of ${searchResultCount}`;
+
+  return (
+    <div className="absolute right-4 top-2 z-20 flex items-center gap-2 rounded-lg border border-border bg-surface px-3 py-2 shadow-lg">
+      {/* Search input */}
+      <input
+        ref={inputRef}
+        type="text"
+        value={localQuery}
+        onChange={(e) => handleChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="在对话中查找..."
+        className="w-48 rounded border border-border bg-surface-raised px-3 py-1.5 text-sm text-text focus:border-text-secondary focus:outline-none"
+      />
+
+      {/* Result count */}
+      {searchQuery && (
+        <span className="whitespace-nowrap text-xs text-text-secondary">
+          {searchResultCount > 0 ? resultLabel : '无结果'}
+        </span>
+      )}
+
+      {/* Navigation buttons */}
+      <div className="flex gap-0.5">
+        <button
+          onClick={previousSearchResult}
+          disabled={searchResultCount === 0}
+          className="rounded p-1 text-text-secondary transition-colors hover:bg-surface-raised hover:text-text disabled:cursor-not-allowed disabled:opacity-30"
+          title="上一个结果（Shift+Enter）"
+        >
+          <ChevronUp className="size-4" />
+        </button>
+        <button
+          onClick={nextSearchResult}
+          disabled={searchResultCount === 0}
+          className="rounded p-1 text-text-secondary transition-colors hover:bg-surface-raised hover:text-text disabled:cursor-not-allowed disabled:opacity-30"
+          title="下一个结果（Enter）"
+        >
+          <ChevronDown className="size-4" />
+        </button>
+      </div>
+
+      {/* Close button */}
+      <button
+        onClick={hideSearch}
+        className="rounded p-1 text-text-secondary transition-colors hover:bg-surface-raised hover:text-text"
+        title="关闭（Esc）"
+      >
+        <X className="size-4" />
+      </button>
+    </div>
+  );
+};

package/src/renderer/components/settings/NotificationTriggerSettings/components/AddTriggerForm.tsx

@@ -0,0 +1,233 @@
+/**
+ * AddTriggerForm - Form to add a new custom trigger.
+ */
+
+import { useCallback } from 'react';
+
+import { ChevronDown, ChevronUp, Loader2, Plus } from 'lucide-react';
+
+import { useAddTriggerFormHandlers } from '../hooks/useAddTriggerFormHandlers';
+import { useAddTriggerFormState } from '../hooks/useAddTriggerFormState';
+import { useRepositoryLookup } from '../hooks/useRepositoryLookup';
+import { useTriggerForm } from '../hooks/useTriggerForm';
+import { generateId } from '../utils/trigger';
+
+import { ColorPaletteSelector } from './ColorPaletteSelector';
+import { DynamicConfigSection } from './DynamicConfigSection';
+import { GeneralInfoSection } from './GeneralInfoSection';
+import { IgnorePatternsSection } from './IgnorePatternsSection';
+import { ModeSelector } from './ModeSelector';
+import { RepositoryScopeSection } from './RepositoryScopeSection';
+import { SectionHeader } from './SectionHeader';
+import { TriggerPreview } from './TriggerPreview';
+
+import type { NotificationTrigger } from '@renderer/types/data';
+
+interface AddTriggerFormProps {
+  saving: boolean;
+  onAdd: (trigger: Omit<NotificationTrigger, 'isBuiltin'>) => Promise<void>;
+}
+
+export const AddTriggerForm = ({
+  saving,
+  onAdd,
+}: Readonly<AddTriggerFormProps>): React.JSX.Element => {
+  // Use form state hook
+  const formState = useAddTriggerFormState();
+  const {
+    name,
+    toolName,
+    mode,
+    contentType,
+    matchField,
+    matchPattern,
+    tokenThreshold,
+    tokenType,
+    ignorePatterns,
+    repositoryIds,
+    color,
+    isExpanded,
+    setName,
+    setMatchField,
+    setTokenType,
+    setColor,
+    setIsExpanded,
+    resetForm,
+  } = formState;
+
+  // Use shared form hook for validation and preview
+  const {
+    patternError,
+    validatePattern,
+    previewResult,
+    handleTestTrigger,
+    handleViewSession,
+    clearPreview,
+    buildTriggerForTest,
+  } = useTriggerForm({});
+
+  // Use handlers hook
+  const handlers = useAddTriggerFormHandlers({
+    formState,
+    validatePattern,
+    clearPreview,
+  });
+
+  // Convert repositoryIds to RepositoryDropdownItem[] for display
+  const selectedRepositoryItems = useRepositoryLookup(repositoryIds);
+
+  // Test trigger using the shared hook
+  const handleTest = useCallback(async (): Promise<void> => {
+    if (mode === 'content_match' && !validatePattern(matchPattern)) return;
+
+    const testTrigger = buildTriggerForTest({
+      name,
+      contentType,
+      mode,
+      matchField,
+      matchPattern,
+      tokenThreshold,
+      tokenType,
+      toolName,
+      ignorePatterns,
+      repositoryIds,
+    });
+
+    await handleTestTrigger(testTrigger);
+  }, [
+    mode,
+    matchPattern,
+    validatePattern,
+    buildTriggerForTest,
+    name,
+    contentType,
+    matchField,
+    tokenThreshold,
+    tokenType,
+    toolName,
+    ignorePatterns,
+    repositoryIds,
+    handleTestTrigger,
+  ]);
+
+  const handleSubmit = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault();
+    if (!name.trim()) return;
+    if (mode === 'content_match' && !validatePattern(matchPattern)) return;
+
+    const newTrigger = handlers.buildNewTrigger(generateId);
+    await onAdd(newTrigger);
+    resetForm();
+    clearPreview();
+    setIsExpanded(false);
+  };
+
+  return (
+    <div className="border-t border-border-subtle">
+      {/* Header */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex w-full items-center justify-between py-3 transition-colors hover:bg-surface-raised"
+      >
+        <div className="flex items-center gap-2">
+          <Plus className="size-4 text-indigo-400" />
+          <span className="text-sm font-medium text-text">添加自定义触发器</span>
+        </div>
+        {isExpanded ? (
+          <ChevronUp className="size-4 text-text-muted" />
+        ) : (
+          <ChevronDown className="size-4 text-text-muted" />
+        )}
+      </button>
+
+      {/* Form */}
+      {isExpanded && (
+        <form onSubmit={handleSubmit} className="space-y-4 pb-4 pl-4">
+          {/* Section 1: General Info */}
+          <GeneralInfoSection
+            name={name}
+            toolName={toolName}
+            saving={saving}
+            onNameChange={setName}
+            onToolNameChange={handlers.handleToolNameChange}
+          />
+
+          {/* Dot Color */}
+          <div className="space-y-3">
+            <SectionHeader title="圆点颜色" />
+            <ColorPaletteSelector value={color} onChange={setColor} disabled={saving} />
+          </div>
+
+          {/* Section 2: Trigger Condition */}
+          <div className="space-y-3">
+            <SectionHeader title="触发条件" />
+            <ModeSelector value={mode} onChange={handlers.handleModeChange} disabled={saving} />
+          </div>
+
+          {/* Section 3: Dynamic Configuration */}
+          <DynamicConfigSection
+            mode={mode}
+            contentType={contentType}
+            toolName={toolName}
+            matchField={matchField}
+            matchPattern={matchPattern}
+            patternError={patternError}
+            tokenThreshold={tokenThreshold}
+            tokenType={tokenType}
+            saving={saving}
+            onContentTypeChange={handlers.handleContentTypeChange}
+            onMatchFieldChange={setMatchField}
+            onMatchPatternChange={handlers.handleMatchPatternChange}
+            onTokenThresholdChange={handlers.handleTokenThresholdChange}
+            onTokenTypeChange={setTokenType}
+          />
+
+          {/* Section 4: Advanced (Collapsible) */}
+          <IgnorePatternsSection
+            patterns={ignorePatterns}
+            onAdd={handlers.handleAddIgnorePattern}
+            onRemove={handlers.handleRemoveIgnorePattern}
+            disabled={saving}
+          />
+
+          {/* Section 5: Repository Scope (Collapsible) */}
+          <RepositoryScopeSection
+            repositoryIds={repositoryIds}
+            selectedItems={selectedRepositoryItems}
+            onAdd={handlers.handleAddRepository}
+            onRemove={handlers.handleRemoveRepository}
+            disabled={saving}
+          />
+
+          {/* Preview Section */}
+          <TriggerPreview
+            previewResult={previewResult}
+            onTest={handleTest}
+            onViewSession={handleViewSession}
+            isFormContext={true}
+          />
+
+          {/* Submit button */}
+          <div className="flex justify-end gap-2 pt-4">
+            <button
+              type="button"
+              onClick={handlers.handleCancel}
+              disabled={saving}
+              className={`rounded bg-surface-raised px-3 py-1.5 text-sm text-text-secondary transition-colors hover:bg-surface-overlay ${saving ? 'cursor-not-allowed opacity-50' : ''} `}
+            >
+              取消
+            </button>
+            <button
+              type="submit"
+              disabled={saving || !name.trim() || !!patternError}
+              className={`flex items-center gap-2 rounded bg-indigo-500 px-3 py-1.5 text-sm text-white transition-colors hover:bg-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-[#141416] ${saving || !name.trim() || !!patternError ? 'cursor-not-allowed opacity-50' : ''} `}
+            >
+              {saving && <Loader2 className="size-4 animate-spin" />}
+              添加触发器
+            </button>
+          </div>
+        </form>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/settings/NotificationTriggerSettings/components/ColorPaletteSelector.tsx

@@ -0,0 +1,144 @@
+/**
+ * ColorPaletteSelector - Color picker with preset palette and custom hex input.
+ * Renders a row of preset colored circles plus a hex input for custom colors.
+ *
+ * Hex input commits on blur/Enter only (not on every keystroke) to avoid
+ * triggering config saves while the user is still typing.
+ */
+
+import { useCallback, useState } from 'react';
+
+import {
+  isPresetColorKey,
+  resolveColorHex,
+  TRIGGER_COLORS,
+  type TriggerColor,
+} from '@shared/constants/triggerColors';
+
+interface ColorPaletteSelectorProps {
+  value: TriggerColor | undefined;
+  onChange: (color: TriggerColor) => void;
+  disabled?: boolean;
+}
+
+const HEX_RE = /^#[0-9a-fA-F]{3,8}$/;
+
+export const ColorPaletteSelector = ({
+  value,
+  onChange,
+  disabled,
+}: Readonly<ColorPaletteSelectorProps>): React.JSX.Element => {
+  const isCustom = !!value && !isPresetColorKey(value);
+  const [hexInput, setHexInput] = useState(isCustom ? value : '');
+  const [showHexInput, setShowHexInput] = useState(isCustom);
+
+  // Only update local state on each keystroke — do NOT call onChange here.
+  const handleHexInputChange = useCallback((raw: string) => {
+    const v = raw.startsWith('#') ? raw : raw.length > 0 ? `#${raw}` : '';
+    setHexInput(v);
+  }, []);
+
+  // Commit hex value on blur or Enter
+  const commitHex = useCallback(() => {
+    if (hexInput && HEX_RE.test(hexInput)) {
+      onChange(hexInput as `#${string}`);
+    }
+  }, [hexInput, onChange]);
+
+  const handleHexKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        commitHex();
+      }
+    },
+    [commitHex]
+  );
+
+  const handlePresetClick = useCallback(
+    (color: TriggerColor) => {
+      onChange(color);
+      setShowHexInput(false);
+    },
+    [onChange]
+  );
+
+  const handleCustomClick = useCallback(() => {
+    setShowHexInput(true);
+    if (hexInput && HEX_RE.test(hexInput)) {
+      onChange(hexInput as `#${string}`);
+    }
+  }, [hexInput, onChange]);
+
+  // Preview swatch shows live hex input (local state) when typing, otherwise the committed value
+  const previewHex =
+    showHexInput && hexInput && HEX_RE.test(hexInput) ? hexInput : resolveColorHex(value);
+
+  return (
+    <div className={`space-y-2 ${disabled ? 'pointer-events-none opacity-50' : ''}`}>
+      {/* Color preview + presets row */}
+      <div className="flex items-center gap-2">
+        {/* Live preview swatch */}
+        <span
+          className="size-6 shrink-0 rounded border border-border-subtle"
+          style={{ backgroundColor: previewHex }}
+          title={value ?? 'red'}
+        />
+
+        {/* Preset palette */}
+        {TRIGGER_COLORS.map((color) => {
+          const isSelected = value === color.key || (!value && color.key === 'red');
+          return (
+            <button
+              key={color.key}
+              type="button"
+              title={color.label}
+              onClick={() => handlePresetClick(color.key as TriggerColor)}
+              disabled={disabled}
+              className={`size-5 rounded-full transition-all ${isSelected ? 'ring-2 ring-white/60 ring-offset-1 ring-offset-surface' : 'hover:ring-1 hover:ring-white/30'}`}
+              style={{ backgroundColor: color.hex }}
+            />
+          );
+        })}
+
+        {/* Custom hex toggle */}
+        <button
+          type="button"
+          title="Custom hex color"
+          onClick={handleCustomClick}
+          disabled={disabled}
+          className={`flex size-5 items-center justify-center rounded-full border text-[9px] font-bold leading-none transition-all ${
+            isCustom
+              ? 'border-white/40 text-white ring-2 ring-white/60 ring-offset-1 ring-offset-surface'
+              : 'border-border-emphasis text-text-muted hover:ring-1 hover:ring-white/30'
+          }`}
+          style={isCustom ? { backgroundColor: resolveColorHex(value) } : undefined}
+        >
+          {isCustom ? '' : '#'}
+        </button>
+      </div>
+
+      {/* Hex input row */}
+      {showHexInput && (
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            value={hexInput}
+            onChange={(e) => handleHexInputChange(e.target.value)}
+            onBlur={commitHex}
+            onKeyDown={handleHexKeyDown}
+            placeholder="#ff6600"
+            maxLength={9}
+            disabled={disabled}
+            className={`w-24 rounded border bg-transparent px-2 py-1 font-mono text-xs text-text placeholder:text-text-muted focus:border-transparent focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+              hexInput && !HEX_RE.test(hexInput) ? 'border-red-500' : 'border-border'
+            }`}
+          />
+          {hexInput && !HEX_RE.test(hexInput) && (
+            <span className="text-xs text-red-400">Invalid hex</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};