copy path and chat about file/folder

2026-02-23 05:15:13 +00:00
parent bdefc52331
commit 9acef6cf6c
24 changed files with 1052 additions and 45 deletions
@@ -0,0 +1,159 @@
+import { useState, useEffect } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useClient } from 'hooks/useClient';
+
+type OcrConfig = {
+  url: string;
+  model: string;
+};
+
+export const OCRSection = () => {
+  const client = useClient();
+  const queryClient = useQueryClient();
+
+  const { data: config, isLoading } = useQuery({
+    queryKey: ['OCR_CONFIG'],
+    queryFn: () => client.get<OcrConfig | null>('/server-settings/ocr'),
+  });
+
+  const [url, setUrl] = useState('http://localhost:64203');
+  const [model, setModel] = useState('Qwen2.5-VL-7B-Instruct-q4_k_m.gguf');
+  const [models, setModels] = useState<string[]>([]);
+  const [modelsLoading, setModelsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isTesting, setIsTesting] = useState(false);
+
+  const fetchModels = async (u: string) => {
+    setModelsLoading(true);
+    try {
+      const res = await client.post<{ models?: string[]; error?: string }>('/server-settings/ocr/models', { url: u });
+      if (res.models) setModels(res.models);
+      else setModels([]);
+    } catch {
+      setModels([]);
+    } finally {
+      setModelsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!config) return;
+    setUrl(config.url);
+    setModel(config.model);
+    fetchModels(config.url);
+  }, [config]);
+
+  const handleSave = async () => {
+    if (isSaving) return;
+    setIsSaving(true);
+    try {
+      await client.put('/server-settings/ocr', { url, model });
+      queryClient.invalidateQueries({ queryKey: ['OCR_CONFIG'] });
+      toast.success('OCR settings saved');
+    } catch {
+      toast.error('Failed to save OCR settings');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleTest = async () => {
+    if (isTesting) return;
+    setIsTesting(true);
+    try {
+      const res = await client.post<{ success?: boolean; error?: string }>('/server-settings/ocr/test', { url, model });
+      if (res.error) {
+        toast.error(res.error);
+      } else {
+        toast.success('Vision model server is reachable');
+      }
+    } catch (err: unknown) {
+      const raw = (err as { message?: string })?.message;
+      let msg = 'Connection failed';
+      try {
+        if (raw) msg = JSON.parse(raw).error ?? msg;
+      } catch {
+        /* ignore */
+      }
+      toast.error(msg);
+    } finally {
+      setIsTesting(false);
+    }
+  };
+
+  if (isLoading) return <p className="text-sm text-duck-dark/40">Loading...</p>;
+
+  return (
+    <div className="grid gap-4">
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70 dark:text-foreground/70">Vision Model Server URL</span>
+        <Input
+          className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
+          placeholder="http://localhost:64203"
+          value={url}
+          onChange={(ev) => setUrl(ev.target.value)}
+        />
+      </Label>
+
+      <Label className="grid gap-2">
+        <div className="flex items-center gap-1.5">
+          <span className="text-duck-dark/70 dark:text-foreground/70">Model</span>
+          <button
+            type="button"
+            onClick={() => fetchModels(url)}
+            disabled={modelsLoading}
+            className="p-0.5 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors disabled:opacity-40"
+            title="Refresh models"
+          >
+            <RefreshCw className={`h-3 w-3 text-duck-dark/50 dark:text-foreground/50 ${modelsLoading ? 'animate-spin' : ''}`} />
+          </button>
+        </div>
+        {models.length > 0 ? (
+          <Select value={model} onValueChange={setModel}>
+            <SelectTrigger className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground">
+              <SelectValue placeholder="Select a model" />
+            </SelectTrigger>
+            <SelectContent className="z-[600] max-h-[300px]">
+              {models.map((m) => (
+                <SelectItem key={m} value={m}>{m}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : (
+          <Input
+            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
+            placeholder="Qwen2.5-VL-7B-Instruct-q4_k_m.gguf"
+            value={model}
+            onChange={(ev) => setModel(ev.target.value)}
+          />
+        )}
+      </Label>
+
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          onClick={handleSave}
+          disabled={isSaving}
+          className="flex-1 h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+        >
+          {isSaving ? 'Saving...' : 'Save'}
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={handleTest}
+          disabled={isTesting}
+          className="h-11 cursor-pointer disabled:opacity-50"
+        >
+          {isTesting ? 'Testing...' : 'Test'}
+        </Button>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,104 @@
+import { useState, useEffect } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useClient } from 'hooks/useClient';
+
+type SttConfig = {
+  url: string;
+};
+
+export const STTSection = () => {
+  const client = useClient();
+  const queryClient = useQueryClient();
+
+  const { data: config, isLoading } = useQuery({
+    queryKey: ['STT_CONFIG'],
+    queryFn: () => client.get<SttConfig | null>('/server-settings/stt'),
+  });
+
+  const [url, setUrl] = useState('http://localhost:64201');
+  const [isSaving, setIsSaving] = useState(false);
+  const [isTesting, setIsTesting] = useState(false);
+
+  useEffect(() => {
+    if (!config) return;
+    setUrl(config.url);
+  }, [config]);
+
+  const handleSave = async () => {
+    if (isSaving) return;
+    setIsSaving(true);
+    try {
+      await client.put('/server-settings/stt', { url });
+      queryClient.invalidateQueries({ queryKey: ['STT_CONFIG'] });
+      toast.success('STT settings saved');
+    } catch {
+      toast.error('Failed to save STT settings');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleTest = async () => {
+    if (isTesting) return;
+    setIsTesting(true);
+    try {
+      const res = await client.post<{ success?: boolean; error?: string }>('/server-settings/stt/test', { url });
+      if (res.error) {
+        toast.error(res.error);
+      } else {
+        toast.success('Whisper server is reachable');
+      }
+    } catch (err: unknown) {
+      const raw = (err as { message?: string })?.message;
+      let msg = 'Connection failed';
+      try {
+        if (raw) msg = JSON.parse(raw).error ?? msg;
+      } catch {
+        /* ignore */
+      }
+      toast.error(msg);
+    } finally {
+      setIsTesting(false);
+    }
+  };
+
+  if (isLoading) return <p className="text-sm text-duck-dark/40">Loading...</p>;
+
+  return (
+    <div className="grid gap-4">
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70 dark:text-foreground/70">Whisper Server URL</span>
+        <Input
+          className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
+          placeholder="http://localhost:64201"
+          value={url}
+          onChange={(ev) => setUrl(ev.target.value)}
+        />
+      </Label>
+
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          onClick={handleSave}
+          disabled={isSaving}
+          className="flex-1 h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+        >
+          {isSaving ? 'Saving...' : 'Save'}
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={handleTest}
+          disabled={isTesting}
+          className="h-11 cursor-pointer disabled:opacity-50"
+        >
+          {isTesting ? 'Testing...' : 'Test'}
+        </Button>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,243 @@
+import { useState, useEffect, useRef } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useClient } from 'hooks/useClient';
+
+type Provider = 'openai' | 'elevenlabs';
+
+type TtsConfig = {
+  provider: Provider;
+  url: string;
+  apiKey?: string;
+  model: string;
+  voice: string;
+};
+
+const PROVIDER_DEFAULTS: Record<Provider, Partial<TtsConfig>> = {
+  openai: { url: 'http://localhost:64202', model: 'kokoro', voice: 'af_heart' },
+  elevenlabs: { url: '', model: 'eleven_multilingual_v2', voice: 'Rachel' },
+};
+
+export const TTSSection = () => {
+  const client = useClient();
+  const queryClient = useQueryClient();
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  const { data: config, isLoading } = useQuery({
+    queryKey: ['TTS_CONFIG'],
+    queryFn: () => client.get<TtsConfig | null>('/server-settings/tts'),
+  });
+
+  const [provider, setProvider] = useState<Provider>('openai');
+  const [url, setUrl] = useState('http://localhost:64202');
+  const [apiKey, setApiKey] = useState('');
+  const [model, setModel] = useState('kokoro');
+  const [voice, setVoice] = useState('af_heart');
+  const [voices, setVoices] = useState<string[]>([]);
+  const [voicesLoading, setVoicesLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isTesting, setIsTesting] = useState(false);
+
+  const fetchVoices = async (p: Provider, u: string, key: string) => {
+    setVoicesLoading(true);
+    try {
+      const res = await client.post<{ voices?: string[]; error?: string }>('/server-settings/tts/voices', {
+        provider: p,
+        url: u,
+        apiKey: key || undefined,
+      });
+      if (res.voices) setVoices(res.voices);
+      else setVoices([]);
+    } catch {
+      setVoices([]);
+    } finally {
+      setVoicesLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!config) return;
+    setProvider(config.provider);
+    setUrl(config.url ?? '');
+    setApiKey(config.apiKey ?? '');
+    setModel(config.model);
+    setVoice(config.voice);
+    fetchVoices(config.provider, config.url ?? '', config.apiKey ?? '');
+  }, [config]);
+
+  const handleProviderChange = (v: Provider) => {
+    setProvider(v);
+    const defaults = PROVIDER_DEFAULTS[v];
+    if (defaults.url !== undefined) setUrl(defaults.url);
+    if (defaults.model !== undefined) setModel(defaults.model);
+    if (defaults.voice !== undefined) setVoice(defaults.voice);
+    setApiKey('');
+  };
+
+  const buildConfig = (): TtsConfig => ({
+    provider,
+    url,
+    model,
+    voice,
+    ...(apiKey ? { apiKey } : {}),
+  });
+
+  const handleSave = async () => {
+    if (isSaving) return;
+    setIsSaving(true);
+    try {
+      await client.put('/server-settings/tts', buildConfig());
+      queryClient.invalidateQueries({ queryKey: ['TTS_CONFIG'] });
+      toast.success('TTS settings saved');
+    } catch {
+      toast.error('Failed to save TTS settings');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleTest = async () => {
+    if (isTesting) return;
+    setIsTesting(true);
+    try {
+      const res = await fetch(`${client.baseUrl}/server-settings/tts/test`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${client.token}` },
+        body: JSON.stringify(buildConfig()),
+      });
+
+      if (!res.ok || res.headers.get('content-type')?.includes('json')) {
+        const json = await res.json().catch(() => ({ error: 'Test failed' }));
+        toast.error(json.error ?? 'Test failed');
+        return;
+      }
+
+      const blob = await res.blob();
+      const audioUrl = URL.createObjectURL(blob);
+      if (audioRef.current) {
+        audioRef.current.pause();
+        URL.revokeObjectURL(audioRef.current.src);
+      }
+      const audio = new Audio(audioUrl);
+      audioRef.current = audio;
+      audio.play();
+      toast.success('Playing test audio');
+    } catch {
+      toast.error('Test failed — could not reach TTS server');
+    } finally {
+      setIsTesting(false);
+    }
+  };
+
+  if (isLoading) return <p className="text-sm text-duck-dark/40">Loading...</p>;
+
+  return (
+    <div className="grid gap-4">
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70 dark:text-foreground/70">Provider</span>
+        <Select value={provider} onValueChange={(v) => handleProviderChange(v as Provider)}>
+          <SelectTrigger className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent className="z-[600]">
+            <SelectItem value="openai">OpenAI-compatible (Kokoro, OpenAI, etc.)</SelectItem>
+            <SelectItem value="elevenlabs">ElevenLabs</SelectItem>
+          </SelectContent>
+        </Select>
+      </Label>
+
+      {provider === 'openai' && (
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70 dark:text-foreground/70">URL</span>
+          <Input
+            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
+            placeholder="http://localhost:64202"
+            value={url}
+            onChange={(ev) => setUrl(ev.target.value)}
+          />
+        </Label>
+      )}
+
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70 dark:text-foreground/70">API Key {provider === 'openai' ? '(optional)' : ''}</span>
+        <Input
+          type="password"
+          className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
+          placeholder={provider === 'elevenlabs' ? 'xi-...' : 'sk-...'}
+          value={apiKey}
+          onChange={(ev) => setApiKey(ev.target.value)}
+        />
+      </Label>
+
+      <div className="grid grid-cols-2 gap-2">
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70 dark:text-foreground/70">Model</span>
+          <Input
+            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
+            placeholder={provider === 'openai' ? 'kokoro' : 'eleven_multilingual_v2'}
+            value={model}
+            onChange={(ev) => setModel(ev.target.value)}
+          />
+        </Label>
+        <Label className="grid gap-2">
+          <div className="flex items-center gap-1.5">
+            <span className="text-duck-dark/70 dark:text-foreground/70">Voice</span>
+            <button
+              type="button"
+              onClick={() => fetchVoices(provider, url, apiKey)}
+              disabled={voicesLoading}
+              className="p-0.5 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors disabled:opacity-40"
+              title="Refresh voices"
+            >
+              <RefreshCw className={`h-3 w-3 text-duck-dark/50 dark:text-foreground/50 ${voicesLoading ? 'animate-spin' : ''}`} />
+            </button>
+          </div>
+          {voices.length > 0 ? (
+            <Select value={voice} onValueChange={setVoice}>
+              <SelectTrigger className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground">
+                <SelectValue placeholder="Select a voice" />
+              </SelectTrigger>
+              <SelectContent className="z-[600] max-h-[300px]">
+                {voices.map((v) => (
+                  <SelectItem key={v} value={v}>{v}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : (
+            <Input
+              className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
+              placeholder={provider === 'openai' ? 'af_heart' : 'Rachel'}
+              value={voice}
+              onChange={(ev) => setVoice(ev.target.value)}
+            />
+          )}
+        </Label>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          onClick={handleSave}
+          disabled={isSaving}
+          className="flex-1 h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+        >
+          {isSaving ? 'Saving...' : 'Save'}
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={handleTest}
+          disabled={isTesting}
+          className="h-11 cursor-pointer disabled:opacity-50"
+        >
+          {isTesting ? 'Testing...' : 'Test'}
+        </Button>
+      </div>
+    </div>
+  );
+};
@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useCallback, type DragEvent } from 'react';
 import { toast } from 'sonner';
-import { Terminal, Eye, Bot, Settings, X, Plus, Mail } from 'lucide-react';
+import { Terminal, Eye, Bot, Settings, X, Plus, Mail, Volume2, Mic, ScanText } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
@@ -20,6 +20,9 @@ import type { UserSettings } from 'state/useSettings';
 import { AIHarnessesSection } from './ServerSettings/AIHarnessesSection';
 import { RUN_COMMAND_CHANNEL, type RunCommandState } from './ServerSettings/run-command-channel';
 import { SMTPSection } from './ServerSettings/SMTPSection';
+import { TTSSection } from './ServerSettings/TTSSection';
+import { STTSection } from './ServerSettings/STTSection';
+import { OCRSection } from './ServerSettings/OCRSection';

 const PROVIDER_DISPLAY: Record<string, string> = {
  anthropic: 'Anthropic',
@@ -50,6 +53,9 @@ const groups: SettingsSectionGroup[] = [
      { key: 'ai-harnesses', icon: Terminal, title: 'Providers', description: 'Remote and local AI providers', content: <AIHarnessesSection /> },
      { key: 'model-visibility', icon: Eye, title: 'Models', description: 'Enable or disable models', content: <ModelVisibilitySection /> },
      { key: 'chat-defaults', icon: Terminal, title: 'Chat Defaults', description: 'Model, prompt, and temperature', content: <ChatDefaultsSection /> },
+      { key: 'tts', icon: Volume2, title: 'Text to Speech', description: 'TTS provider and voice', content: <TTSSection /> },
+      { key: 'stt', icon: Mic, title: 'Speech to Text', description: 'Whisper server URL', content: <STTSection /> },
+      { key: 'ocr', icon: ScanText, title: 'OCR', description: 'Vision model for text extraction', content: <OCRSection /> },
    ],
  },
  {