@seqyuan/annodex 0.1.11 → 0.1.12

package/components/SettingsDialog.tsx

@@ -0,0 +1,287 @@
+"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>
+  );
+}