init: initial commit

2026-04-01 14:09:33 +08:00
commit aef2e152dc
66 changed files with 6540 additions and 0 deletions
@@ -0,0 +1,136 @@
+import { useState } from 'react';
+
+interface AIPanelProps {
+  text: string;
+  loading: boolean;
+  error: string | null;
+  isFallback: boolean;
+  question: string;
+  onCopy: (text: string) => void;
+  onStop: () => void;
+  onClose: () => void;
+}
+
+export default function AIPanel({
+  text, loading, error, isFallback, question, onCopy, onStop, onClose,
+}: AIPanelProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    onCopy(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1000);
+  };
+
+  return (
+    <div className="flex-shrink-0 px-4 pb-4 animate-fade-in">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-1.5">
+          <span className="text-sm">✨</span>
+          <span className="text-[12px] font-semibold text-accent-light">
+            DeepSeek RAG
+          </span>
+
+          {/* Animated loading dots */}
+          {loading && (
+            <div className="flex gap-1 ml-1">
+              {[0, 1, 2].map(i => (
+                <span
+                  key={i}
+                  className="w-1 h-1 rounded-full bg-accent-light"
+                  style={{ animation: `pulseDot 1.4s ease-in-out ${i * 0.2}s infinite` }}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Fallback badge */}
+          {isFallback && !loading && (
+            <span className="text-[9px] px-1.5 py-0.5 rounded-full bg-amber-500/20 text-amber-400 border border-amber-500/30 ml-1">
+              本地降级
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-1">
+          {/* Stop button — only visible while streaming */}
+          {loading && (
+            <button
+              id="btn-ai-stop"
+              onClick={onStop}
+              title="停止生成"
+              className="flex items-center gap-1 text-[10px] px-2 py-1 rounded-md
+                         bg-red-500/15 text-red-400 border border-red-500/25
+                         hover:bg-red-500/25 transition-all"
+            >
+              <span>⬛</span> 停止
+            </button>
+          )}
+          <button
+            id="btn-ai-close"
+            onClick={onClose}
+            className="text-white/30 hover:text-white/70 text-xs transition-colors ml-1"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+
+      {/* Question context */}
+      {question && (
+        <p className="text-[10px] text-white/35 mb-2 line-clamp-1">
+          针对：{question}
+        </p>
+      )}
+
+      {/* Fallback notice */}
+      {isFallback && (
+        <div className="mb-2 px-2 py-1.5 rounded-lg bg-amber-500/10 border border-amber-500/20
+                        text-amber-400 text-[10px] flex items-center gap-1.5">
+          <span>⚠️</span>
+          <span>DeepSeek 暂时不可用，已显示知识库原始答案</span>
+        </div>
+      )}
+
+      {/* Error state */}
+      {error && !isFallback ? (
+        <div className="ai-panel border-red-500/30 bg-red-500/5">
+          <p className="text-red-400 text-[12px] font-medium mb-1">⚠️ AI 服务暂时不可用</p>
+          <p className="text-white/50 text-[11px]">{error}</p>
+          <p className="text-white/30 text-[11px] mt-2">请直接使用上方知识库原始答案。</p>
+        </div>
+      ) : (
+        /* Content panel with typewriter effect */
+        <div className={`ai-panel ${isFallback ? 'border-amber-500/20 bg-amber-500/5' : ''}`}>
+          {loading && !text ? (
+            <p className="text-white/30 text-[12px] animate-pulse">
+              正在检索知识库并调用 DeepSeek…
+            </p>
+          ) : (
+            <p className="text-[13px] leading-relaxed whitespace-pre-wrap">
+              {text}
+              {/* Blinking cursor while streaming */}
+              {loading && (
+                <span className="inline-block w-0.5 h-3.5 bg-accent ml-0.5 align-middle"
+                      style={{ animation: 'pulseDot 0.8s ease-in-out infinite' }} />
+              )}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Copy button */}
+      {text && !error && (
+        <button
+          id="btn-ai-copy"
+          onClick={handleCopy}
+          className="mt-2 w-full text-[11px] py-2 rounded-lg bg-accent/20 text-accent-light
+                     border border-accent/30 hover:bg-accent/35 transition-all font-medium"
+        >
+          {copied ? '✓ 已复制' : '📋 复制此话术'}
+        </button>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState } from 'react';
+import { CreateLibrary, DeleteLibrary, ImportCSV, ListLibraries, SwitchLibrary } from 'wailsjs/go/main/App';
+import type { handler } from 'wailsjs/go/models';
+
+interface LibraryBarProps {
+  activeName: string;
+  onSwitch: (name: string) => void;
+}
+
+export default function LibraryBar({ activeName, onSwitch }: LibraryBarProps) {
+  const [open, setOpen]       = useState(false);
+  const [libs, setLibs]       = useState<handler.LibraryInfo[]>([]);
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [importing, setImporting] = useState(false);
+  const [msg, setMsg]         = useState('');
+  const ref = useRef<HTMLDivElement>(null);
+
+  const load = async () => { setLibs(await ListLibraries()); };
+
+  useEffect(() => {
+    if (open) load();
+  }, [open]);
+
+  // Close on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  const handleSwitch = async (name: string) => {
+    await SwitchLibrary(name);
+    onSwitch(name);
+    setOpen(false);
+  };
+
+  const handleCreate = async () => {
+    if (!newName.trim()) return;
+    const err = await CreateLibrary(newName.trim(), '');
+    if (!err) { onSwitch(newName.trim()); setNewName(''); setCreating(false); load(); }
+    else setMsg(err);
+  };
+
+  const handleImport = async () => {
+    setImporting(true); setMsg('');
+    const result = await ImportCSV();
+    setImporting(false);
+    if (result.error && result.error !== '已取消') setMsg(result.error);
+    else if (result.imported > 0) { setMsg(`✓ 导入了 ${result.imported} 条（跳过 ${result.skipped} 条）`); load(); }
+    setTimeout(() => setMsg(''), 4000);
+  };
+
+  return (
+    <div ref={ref} className="relative px-4 pb-2">
+      {/* Button row */}
+      <div className="flex items-center gap-2">
+        <button onClick={() => setOpen(o => !o)}
+          className="flex-1 flex items-center gap-2 px-3 py-1.5 rounded-xl
+                     bg-white/5 hover:bg-white/10 border border-white/8 transition-all text-left">
+          <span className="text-sm">📚</span>
+          <span className="text-[12px] text-white/80 truncate flex-1">{activeName || '选择知识库'}</span>
+          <span className="text-[10px] text-white/30">{open ? '▲' : '▾'}</span>
+        </button>
+        <button onClick={handleImport} disabled={importing} title="导入 CSV"
+          className="px-2.5 py-1.5 rounded-xl bg-accent/15 text-accent-light border border-accent/25
+                     hover:bg-accent/25 transition-all text-[11px] font-medium disabled:opacity-50">
+          {importing ? '…' : '📥 导入'}
+        </button>
+      </div>
+
+      {msg && <p className={`text-[10px] mt-1 ${msg.startsWith('✓') ? 'text-green-400' : 'text-red-400'}`}>{msg}</p>}
+
+      {/* Dropdown */}
+      {open && (
+        <div className="absolute left-4 right-4 top-full mt-1 z-40
+                        bg-[rgba(12,10,24,0.98)] border border-white/10 rounded-xl
+                        shadow-2xl overflow-hidden animate-fade-in">
+          <div className="max-h-48 overflow-y-auto results-scroll">
+            {libs.map(lib => (
+              <div key={lib.id}
+                className={`flex items-center gap-2 px-3 py-2.5 cursor-pointer transition-colors
+                  ${lib.is_active ? 'bg-accent/15 border-l-2 border-accent' : 'hover:bg-white/5'}`}
+                onClick={() => handleSwitch(lib.name)}>
+                <span className="text-sm">{lib.is_active ? '✅' : '📁'}</span>
+                <div className="flex-1 min-w-0">
+                  <p className="text-[12px] text-white/85 truncate">{lib.name}</p>
+                  <p className="text-[10px] text-white/35">{lib.entry_count} 条记录</p>
+                </div>
+                {!lib.is_active && (
+                  <button onClick={e => { e.stopPropagation(); DeleteLibrary(lib.name); load(); }}
+                    className="text-white/20 hover:text-red-400 text-xs transition-colors">✕</button>
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* Create new */}
+          <div className="border-t border-white/8 p-2">
+            {creating ? (
+              <div className="flex gap-2">
+                <input autoFocus className="flex-1 search-input text-[11px]" placeholder="知识库名称"
+                  value={newName} onChange={e => setNewName(e.target.value)}
+                  onKeyDown={e => e.key === 'Enter' && handleCreate()}
+                  style={{ paddingLeft: '10px', paddingRight: '10px' }} />
+                <button onClick={handleCreate}
+                  className="px-3 py-1.5 rounded-lg bg-accent text-white text-[11px]">✓</button>
+                <button onClick={() => setCreating(false)} className="text-white/30 text-xs">✕</button>
+              </div>
+            ) : (
+              <button onClick={() => setCreating(true)}
+                className="w-full flex items-center gap-2 px-2 py-1.5 rounded-lg
+                           text-[11px] text-white/50 hover:text-white/70 hover:bg-white/5 transition-all">
+                <span>+</span> 新建知识库
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import type { SearchResult } from '../hooks/useSearch';
+
+interface ResultCardProps {
+  result: SearchResult;
+  onPolish: (result: SearchResult) => void;
+}
+
+const CATEGORY_COLORS: Record<string, string> = {
+  '通用':   'bg-indigo-500/20 text-indigo-300',
+  '退款':   'bg-red-500/20 text-red-300',
+  '物流':   'bg-amber-500/20 text-amber-300',
+  '产品':   'bg-emerald-500/20 text-emerald-300',
+  '促销':   'bg-pink-500/20 text-pink-300',
+};
+
+export default function ResultCard({ result, onPolish }: ResultCardProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(result.answer);
+    } catch {
+      // Wails fallback — plain execCommand
+      const el = document.createElement('textarea');
+      el.value = result.answer;
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand('copy');
+      document.body.removeChild(el);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1000);
+  };
+
+  const catColor = CATEGORY_COLORS[result.category] ?? 'bg-white/10 text-white/50';
+
+  return (
+    <div className={`result-card group relative ${result.is_fallback ? 'opacity-70' : ''}`} onClick={handleCopy}>
+      {/* Category badge + match indicator */}
+      <div className="flex items-center justify-between mb-2">
+        <span className={`text-[10px] font-medium px-2 py-0.5 rounded-full ${catColor}`}>
+          {result.category}
+        </span>
+        {result.is_fallback ? (
+          <span className="text-[10px] text-white/30 flex items-center gap-1">
+            🔥 热门推荐
+          </span>
+        ) : result.score === 2 ? (
+          <span className="text-[10px] text-accent-light flex items-center gap-1">
+            ⚡ 精准匹配
+          </span>
+        ) : null}
+      </div>
+
+      {/* Question */}
+      <p className="text-[12px] text-white/50 mb-1.5 line-clamp-1">
+        Q: {result.question}
+      </p>
+
+      {/* Answer */}
+      <p className="text-[13px] text-white/90 leading-relaxed line-clamp-3">
+        {result.answer}
+      </p>
+
+      {/* Hover action bar */}
+      <div className="flex items-center gap-2 mt-3 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button
+          id={`btn-copy-${result.id}`}
+          onClick={e => { e.stopPropagation(); handleCopy(); }}
+          className="flex-1 text-[11px] py-1.5 rounded-lg bg-accent/20 text-accent-light border border-accent/30
+                     hover:bg-accent/35 transition-all font-medium"
+        >
+          {copied ? '✓ 已复制' : '📋 复制'}
+        </button>
+        <button
+          id={`btn-polish-${result.id}`}
+          onClick={e => { e.stopPropagation(); onPolish(result); }}
+          className="flex-1 text-[11px] py-1.5 rounded-lg bg-white/5 text-white/60 border border-white/10
+                     hover:bg-accent/15 hover:text-accent-light hover:border-accent/30 transition-all font-medium"
+        >
+          ✨ AI 润色
+        </button>
+      </div>
+
+      {/* Copy toast */}
+      {copied && (
+        <div className="copy-toast absolute top-2 right-2 text-[10px] bg-green-500/20 text-green-400
+                        border border-green-500/30 px-2 py-1 rounded-md pointer-events-none">
+          已复制到剪贴板 ✓
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,53 @@
+import { useRef } from 'react';
+
+interface SearchInputProps {
+  value: string;
+  onChange: (v: string) => void;
+  loading: boolean;
+}
+
+export default function SearchInput({ value, onChange, loading }: SearchInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="px-4 pt-4 pb-2 flex-shrink-0">
+      <div className="relative">
+        {/* Icon / spinner */}
+        <div className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 flex items-center justify-center">
+          {loading ? (
+            <svg className="animate-spin w-4 h-4 text-accent" viewBox="0 0 24 24" fill="none">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/>
+              <path className="opacity-75" fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
+            </svg>
+          ) : (
+            <svg className="w-4 h-4 text-white/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+            </svg>
+          )}
+        </div>
+
+        <input
+          ref={inputRef}
+          id="search-input"
+          className="search-input"
+          type="text"
+          placeholder="输入关键词搜索知识库…"
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          style={{ userSelect: 'text' }}
+        />
+
+        {/* Clear button */}
+        {value && (
+          <button
+            onClick={() => { onChange(''); inputRef.current?.focus(); }}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/70 transition-colors text-xs"
+          >
+            ✕
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,138 @@
+import { useEffect, useState } from 'react';
+import { GetProviders, GetSettings, SaveSettings } from 'wailsjs/go/main/App';
+import type { handler, service } from 'wailsjs/go/models';
+
+interface SettingsModalProps {
+  onClose: () => void;
+}
+
+const EMPTY: service.SettingsDTO = {
+  ai_provider: 'deepseek', base_url: '', api_key: '',
+  model: 'deepseek-chat', system_prompt: '', max_tokens: 1024, use_public_key: true,
+};
+
+export default function SettingsModal({ onClose }: SettingsModalProps) {
+  const [form, setForm]           = useState<service.SettingsDTO>(EMPTY);
+  const [providers, setProviders] = useState<handler.ProviderPreset[]>([]);
+  const [saving, setSaving]       = useState(false);
+  const [msg, setMsg]             = useState('');
+
+  useEffect(() => {
+    Promise.all([GetSettings(), GetProviders()]).then(([s, p]) => {
+      if (s) setForm(s);
+      setProviders(p);
+    });
+  }, []);
+
+  const set = (k: keyof service.SettingsDTO, v: unknown) =>
+    setForm(f => ({ ...f, [k]: v }));
+
+  const handleProviderChange = (providerId: string) => {
+    const preset = providers.find(p => p.id === providerId);
+    set('ai_provider', providerId);
+    if (preset?.base_url) set('base_url', preset.base_url);
+    if (preset?.default_model) set('model', preset.default_model);
+  };
+
+  const handleSave = async () => {
+    setSaving(true); setMsg('');
+    const err = await SaveSettings(form);
+    setMsg(err || '✓ 已保存');
+    setSaving(false);
+    if (!err) setTimeout(onClose, 800);
+  };
+
+  const inp = 'search-input text-[12px]';
+  const lbl = 'text-[10px] text-white/45 mb-1';
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end pb-2 px-2">
+      <div className="w-full bg-[rgba(14,12,28,0.97)] border border-white/10 rounded-2xl
+                      shadow-2xl overflow-hidden animate-slide-in">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-white/8">
+          <span className="text-[13px] font-semibold text-white">⚙️ AI 设置</span>
+          <button onClick={onClose} className="text-white/30 hover:text-white/70 text-xs">✕</button>
+        </div>
+
+        <div className="px-4 py-3 flex flex-col gap-3 overflow-y-auto max-h-[480px] results-scroll">
+          {/* Public key toggle */}
+          <label className="flex items-center justify-between cursor-pointer">
+            <span className="text-[12px] text-white/70">使用公共线路（无需填 Key）</span>
+            <div onClick={() => set('use_public_key', !form.use_public_key)}
+              className={`w-10 h-5 rounded-full transition-colors relative ${form.use_public_key ? 'bg-accent' : 'bg-white/15'}`}>
+              <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform
+                ${form.use_public_key ? 'translate-x-5' : 'translate-x-0.5'}`} />
+            </div>
+          </label>
+
+          {!form.use_public_key && (<>
+            {/* Provider */}
+            <div>
+              <p className={lbl}>AI 服务商</p>
+              <select value={form.ai_provider} onChange={e => handleProviderChange(e.target.value)}
+                className={inp + ' w-full bg-white/6 border border-white/12 rounded-xl px-3 py-2'}>
+                {providers.map(p => <option key={p.id} value={p.id}>{p.label}</option>)}
+              </select>
+            </div>
+
+            {/* Base URL (shown for custom) */}
+            {form.ai_provider === 'custom' && (
+              <div>
+                <p className={lbl}>API 地址 (Base URL)</p>
+                <input className={inp} placeholder="https://your-api/v1/chat/completions"
+                  value={form.base_url} onChange={e => set('base_url', e.target.value)}
+                  style={{ paddingLeft: '14px' }} />
+              </div>
+            )}
+
+            {/* API Key */}
+            <div>
+              <p className={lbl}>API Key（加密存储）</p>
+              <input className={inp} type="password" placeholder="sk-..."
+                value={form.api_key} onChange={e => set('api_key', e.target.value)}
+                style={{ paddingLeft: '14px' }} />
+            </div>
+
+            {/* Model */}
+            <div>
+              <p className={lbl}>模型</p>
+              <input className={inp} placeholder="deepseek-chat"
+                value={form.model} onChange={e => set('model', e.target.value)}
+                style={{ paddingLeft: '14px' }} />
+            </div>
+
+            {/* Max tokens */}
+            <div>
+              <p className={lbl}>Max Tokens: {form.max_tokens}</p>
+              <input type="range" min={256} max={4096} step={128}
+                value={form.max_tokens} onChange={e => set('max_tokens', Number(e.target.value))}
+                className="w-full accent-accent" />
+            </div>
+          </>)}
+
+          {/* System prompt (always visible) */}
+          <div>
+            <p className={lbl}>自定义系统提示词（留空使用默认 RAG 提示）</p>
+            <textarea value={form.system_prompt} onChange={e => set('system_prompt', e.target.value)}
+              rows={3} placeholder="你是一位专业客服顾问…"
+              className="w-full bg-white/6 border border-white/12 rounded-xl px-3 py-2
+                         text-[12px] text-white/80 resize-none focus:outline-none
+                         focus:border-accent/50 focus:shadow-[0_0_0_3px_rgba(124,110,247,0.2)]"
+              style={{ userSelect: 'text' }} />
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="px-4 pb-3 flex items-center gap-2">
+          {msg && <span className={`text-[11px] flex-1 ${msg.startsWith('✓') ? 'text-green-400' : 'text-red-400'}`}>{msg}</span>}
+          <button onClick={handleSave} disabled={saving}
+            className="ml-auto px-5 py-2 rounded-xl bg-accent text-white text-[12px] font-semibold
+                       hover:bg-accent-light transition-all disabled:opacity-50">
+            {saving ? '保存中…' : '保存'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { ToggleTopmost } from 'wailsjs/go/main/App';
+import { Quit, WindowMinimise } from 'wailsjs/runtime/runtime';
+
+interface TitleBarProps {
+  dbReady: boolean;
+  onSettings: () => void;
+}
+
+export default function TitleBar({ dbReady, onSettings }: TitleBarProps) {
+  const [pinned, setPinned] = useState(true);
+
+  const handlePin = async () => {
+    const next = !pinned;
+    setPinned(next);
+    await ToggleTopmost(next);
+  };
+
+  return (
+    <div className="drag-region flex items-center justify-between px-4 py-3 flex-shrink-0 border-b border-white/5">
+      {/* Logo */}
+      <div className="flex items-center gap-2 select-none pointer-events-none">
+        <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-accent to-accent-dark flex items-center justify-center shadow-lg">
+          <span className="text-white text-xs">🤖</span>
+        </div>
+        <div>
+          <p className="text-[12px] font-semibold text-white leading-tight">AI Expert Sidebar</p>
+          <div className="flex items-center gap-1">
+            <span className={`w-1.5 h-1.5 rounded-full ${dbReady ? 'bg-green-400' : 'bg-amber-400'}`}
+              style={{ boxShadow: dbReady ? '0 0 5px #4ade80' : '0 0 5px #fbbf24' }} />
+            <span className="text-[9px] text-white/35">{dbReady ? '本地 SQLite' : '初始化…'}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Controls */}
+      <div className="flex items-center gap-1" style={{ '--wails-draggable': 'no-drag' } as React.CSSProperties}>
+        <button id="btn-settings" onClick={onSettings} title="AI 设置"
+          className="w-7 h-7 rounded-md flex items-center justify-center text-sm text-white/40
+                     hover:bg-white/10 hover:text-white/70 transition-all">
+          ⚙️
+        </button>
+        <button id="btn-pin" onClick={handlePin} title={pinned ? '取消置顶' : '置顶'}
+          className={`w-7 h-7 rounded-md flex items-center justify-center text-sm transition-all
+            ${pinned ? 'bg-accent/30 text-accent-light border border-accent/40'
+                     : 'text-white/40 hover:bg-white/10'}`}>
+          📌
+        </button>
+        <button id="btn-min" onClick={() => WindowMinimise()} title="最小化"
+          className="w-7 h-7 rounded-md flex items-center justify-center text-xs text-white/40 hover:bg-white/10 transition-all">
+          ─
+        </button>
+        <button id="btn-quit" onClick={() => Quit()} title="退出"
+          className="w-7 h-7 rounded-md flex items-center justify-center text-xs text-white/40
+                     hover:bg-red-500/20 hover:text-red-400 transition-all">
+          ✕
+        </button>
+      </div>
+    </div>
+  );
+}