@seqyuan/annodex 0.1.12 → 0.1.13

package/components/SettingsDialog.tsx

@@ -1,287 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { ModelsConfig } from "./ModelsConfig";
-import { SkillsConfig } from "./SkillsConfig";
-import { ProjectsConfig } from "./ProjectsConfig";
-
-export type SettingsTab = "projects" | "models" | "skills" | "generative-ui";
-
-interface SettingsDialogProps {
-  cwd: string | null;
-  generativeUI: boolean;
-  initialTab?: SettingsTab;
-  onGenerativeUIToggle: () => void;
-  onClose: () => void;
-  onModelsChanged?: () => void;
-  onProjectSelect?: (cwd: string) => void;
-  onProjectsChanged?: () => void;
-}
-
-interface TabItem {
-  id: SettingsTab;
-  label: string;
-  description: string;
-  disabled?: boolean;
-  icon: React.ReactNode;
-}
-
-function Toggle({
-  checked,
-  onChange,
-}: {
-  checked: boolean;
-  onChange: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onChange}
-      aria-pressed={checked}
-      style={{
-        width: 44,
-        height: 24,
-        borderRadius: 999,
-        border: "none",
-        padding: 0,
-        cursor: "pointer",
-        background: checked ? "var(--accent)" : "var(--border)",
-        position: "relative",
-        transition: "background 0.18s",
-        flexShrink: 0,
-      }}
-    >
-      <span
-        style={{
-          position: "absolute",
-          top: 3,
-          left: checked ? 23 : 3,
-          width: 18,
-          height: 18,
-          borderRadius: "50%",
-          background: "var(--bg)",
-          boxShadow: "0 1px 4px rgba(0,0,0,0.22)",
-          transition: "left 0.18s cubic-bezier(.4,0,.2,1)",
-        }}
-      />
-    </button>
-  );
-}
-
-function SettingsIcon() {
-  return (
-    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.51a2 2 0 0 1 1-1.72l.15-.1a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z" />
-      <circle cx="12" cy="12" r="3" />
-    </svg>
-  );
-}
-
-function tabIcon(id: SettingsTab) {
-  if (id === "projects") {
-    return (
-      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M3 6.5A2.5 2.5 0 0 1 5.5 4H10l2 2.5h6.5A2.5 2.5 0 0 1 21 9v8.5A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5v-11Z" />
-      </svg>
-    );
-  }
-  if (id === "models") {
-    return (
-      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <rect x="4" y="4" width="16" height="16" rx="2" />
-        <rect x="9" y="9" width="6" height="6" />
-        <line x1="9" y1="1" x2="9" y2="4" />
-        <line x1="15" y1="1" x2="15" y2="4" />
-        <line x1="9" y1="20" x2="9" y2="23" />
-        <line x1="15" y1="20" x2="15" y2="23" />
-      </svg>
-    );
-  }
-  if (id === "skills") {
-    return (
-      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M12 2L2 7l10 5 10-5-10-5z" />
-        <path d="M2 17l10 5 10-5" />
-        <path d="M2 12l10 5 10-5" />
-      </svg>
-    );
-  }
-  if (id === "generative-ui") {
-    return (
-      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <rect x="3" y="3" width="7" height="7" rx="1.5" />
-        <rect x="14" y="3" width="7" height="7" rx="1.5" />
-        <rect x="3" y="14" width="7" height="7" rx="1.5" />
-        <path d="M16 17h5" />
-        <path d="M18.5 14.5v5" />
-      </svg>
-    );
-  }
-  return (
-    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M3 3v18h18" />
-      <path d="m19 9-5 5-4-4-3 3" />
-      <path d="M14 9h5v5" />
-    </svg>
-  );
-}
-
-export function SettingsDialog({
-  cwd,
-  generativeUI,
-  initialTab = "projects",
-  onGenerativeUIToggle,
-  onClose,
-  onModelsChanged,
-  onProjectSelect,
-  onProjectsChanged,
-}: SettingsDialogProps) {
-  const [activeTab, setActiveTab] = useState<SettingsTab>(initialTab);
-
-  useEffect(() => {
-    setActiveTab(initialTab);
-  }, [initialTab]);
-
-  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [onClose]);
-
-  const tabs: TabItem[] = [
-    { id: "projects", label: "Project", description: cwd ? "Overview and paths" : "Add or select a project", icon: tabIcon("projects") },
-    { id: "models", label: "Models", description: "~/.config/annodex/providers.json", icon: tabIcon("models") },
-    { id: "skills", label: "Skills", description: cwd ? "Project and global skills" : "Select a project first", disabled: !cwd, icon: tabIcon("skills") },
-    { id: "generative-ui", label: "Generative UI", description: generativeUI ? "Enabled" : "Disabled", icon: tabIcon("generative-ui") },
-  ];
-
-  const activeItem = tabs.find((tab) => tab.id === activeTab) ?? tabs[0];
-
-  return (
-    <div
-      className="settings-dialog-backdrop"
-      onClick={(event) => {
-        if (event.target === event.currentTarget) onClose();
-      }}
-    >
-      <div className="settings-dialog-shell">
-        <div className="settings-dialog-header">
-          <div style={{ display: "flex", alignItems: "center", gap: 9, minWidth: 0 }}>
-            <span style={{ color: "var(--text-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}>
-              <SettingsIcon />
-            </span>
-            <div style={{ minWidth: 0 }}>
-              <div style={{ fontSize: 15, fontWeight: 700, color: "var(--text)", lineHeight: 1.25 }}>Settings</div>
-              <div style={{ fontSize: 11, color: "var(--text-dim)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                {activeItem.label}
-              </div>
-            </div>
-          </div>
-          <button
-            type="button"
-            onClick={onClose}
-            title="Close settings"
-            aria-label="Close settings"
-            style={{
-              width: 30,
-              height: 30,
-              border: "none",
-              borderRadius: 6,
-              background: "transparent",
-              color: "var(--text-muted)",
-              cursor: "pointer",
-              fontSize: 20,
-              lineHeight: 1,
-            }}
-            onMouseEnter={(event) => { event.currentTarget.style.background = "var(--bg-hover)"; event.currentTarget.style.color = "var(--text)"; }}
-            onMouseLeave={(event) => { event.currentTarget.style.background = "transparent"; event.currentTarget.style.color = "var(--text-muted)"; }}
-          >
-            x
-          </button>
-        </div>
-
-        <div className="settings-dialog-body">
-          <div className="settings-dialog-tabs">
-            {tabs.map((tab) => {
-              const active = activeTab === tab.id;
-              return (
-                <button
-                  key={tab.id}
-                  type="button"
-                  disabled={tab.disabled}
-                  onClick={() => setActiveTab(tab.id)}
-                  className="settings-dialog-tab"
-                  style={{
-                    background: active ? "var(--bg-selected)" : "transparent",
-                    color: active ? "var(--text)" : "var(--text-muted)",
-                    opacity: tab.disabled ? 0.45 : 1,
-                    cursor: tab.disabled ? "not-allowed" : "pointer",
-                  }}
-                  onMouseEnter={(event) => { if (!active && !tab.disabled) event.currentTarget.style.background = "var(--bg-hover)"; }}
-                  onMouseLeave={(event) => { if (!active) event.currentTarget.style.background = "transparent"; }}
-                >
-                  <span style={{ flexShrink: 0, color: active ? "var(--accent)" : "currentColor", display: "flex" }}>{tab.icon}</span>
-                  <span style={{ minWidth: 0, flex: 1 }}>
-                    <span style={{ display: "block", fontSize: 12, fontWeight: active ? 700 : 600, lineHeight: 1.25 }}>{tab.label}</span>
-                    <span style={{ display: "block", marginTop: 2, fontSize: 10, color: "var(--text-dim)", lineHeight: 1.25, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{tab.description}</span>
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-
-          <div className="settings-dialog-panel">
-            {activeTab === "projects" && (
-              <ProjectsConfig
-                activeCwd={cwd}
-                onSelectProject={onProjectSelect}
-                onProjectsChanged={onProjectsChanged}
-              />
-            )}
-            {activeTab === "models" && (
-              <ModelsConfig
-                embedded
-                onClose={() => {
-                  onModelsChanged?.();
-                  onClose();
-                }}
-              />
-            )}
-            {activeTab === "skills" && cwd && <SkillsConfig cwd={cwd} embedded onClose={onClose} />}
-            {activeTab === "generative-ui" && (
-              <div style={{ height: "100%", overflowY: "auto", padding: 20 }}>
-                <div style={{ maxWidth: 720, display: "flex", flexDirection: "column", gap: 18 }}>
-                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18, padding: 16, border: "1px solid var(--border)", borderRadius: 8, background: "var(--bg-panel)" }}>
-                    <div style={{ minWidth: 0 }}>
-                      <div style={{ fontSize: 14, fontWeight: 700, color: "var(--text)", lineHeight: 1.35 }}>Generative UI</div>
-                      <div style={{ marginTop: 5, fontSize: 12, color: "var(--text-muted)", lineHeight: 1.55 }}>
-                        Render structured widgets and safe visual code blocks directly in chat when the assistant produces UI content.
-                      </div>
-                    </div>
-                    <Toggle checked={generativeUI} onChange={onGenerativeUIToggle} />
-                  </div>
-                  <div style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: 12 }}>
-                    <div style={{ padding: 14, border: "1px solid var(--border)", borderRadius: 8 }}>
-                      <div style={{ fontSize: 12, fontWeight: 700, color: "var(--text)", marginBottom: 5 }}>When enabled</div>
-                      <div style={{ fontSize: 12, color: "var(--text-muted)", lineHeight: 1.6 }}>
-                        The agent prompt favors compact visual artifacts for icons, forms, dashboards, and small interactive UI when useful.
-                      </div>
-                    </div>
-                    <div style={{ padding: 14, border: "1px solid var(--border)", borderRadius: 8 }}>
-                      <div style={{ fontSize: 12, fontWeight: 700, color: "var(--text)", marginBottom: 5 }}>Fallback rendering</div>
-                      <div style={{ fontSize: 12, color: "var(--text-muted)", lineHeight: 1.6 }}>
-                        Assistant SVG and safe HTML code blocks can be previewed instead of appearing only as source text.
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}