iris-chatbot 0.2.4

package/template/src/components/Sidebar.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+  Folder,
+  PanelLeftClose,
+  PenSquare,
+  Search,
+  Trash2,
+} from "lucide-react";
+import type { Thread } from "../lib/types";
+
+export default function Sidebar({
+  threads,
+  activeThreadId,
+  collapsed,
+  onSelect,
+  onNewChat,
+  onDeleteThread,
+  onToggleCollapse,
+  onOpenSearch,
+}: {
+  threads: Thread[];
+  activeThreadId: string | null;
+  collapsed: boolean;
+  onSelect: (id: string) => void;
+  onNewChat: () => void;
+  onDeleteThread: (thread: Thread) => void;
+  onToggleCollapse: () => void;
+  onOpenSearch: () => void;
+}) {
+  const groups = useMemo(() => {
+    const map = new Map<string, Thread[]>();
+    threads.forEach((thread) => {
+      const list = map.get(thread.conversationId) || [];
+      list.push(thread);
+      map.set(thread.conversationId, list);
+    });
+
+    const grouped = Array.from(map.values()).map((list) => {
+      const sorted = [...list].sort((a, b) => b.updatedAt - a.updatedAt);
+      const root =
+        sorted.find((item) => !item.forkedFromMessageId) || sorted[0];
+      return { root };
+    });
+
+    grouped.sort((a, b) => b.root.updatedAt - a.root.updatedAt);
+    return grouped;
+  }, [threads]);
+
+  return (
+    <aside className={`sidebar flex flex-col h-full ${collapsed ? "collapsed" : ""}`}>
+      {!collapsed ? (
+        <div className="flex items-center justify-between px-4 py-4">
+          <button
+            className="flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-sm text-[var(--text-primary)] hover:border-[var(--border-strong)] transition"
+            onClick={onNewChat}
+          >
+            <PenSquare className="h-4 w-4 sidebar-text" />
+            <span className="sidebar-text">New chat</span>
+          </button>
+          {!collapsed ? (
+            <button
+              className="rounded-lg border border-[var(--border)] bg-[var(--panel-2)] p-2 text-[var(--text-secondary)] hover:border-[var(--border-strong)]"
+              onClick={onToggleCollapse}
+            >
+              <PanelLeftClose className="h-4 w-4" />
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+
+      {!collapsed ? (
+        <>
+          <div className="px-4 pb-2">
+            <button
+              className="flex w-full items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-xs text-[var(--text-muted)] hover:border-[var(--border-strong)]"
+              onClick={onOpenSearch}
+            >
+              <Search className="h-4 w-4" />
+              <span className="sidebar-text">Search chats</span>
+            </button>
+          </div>
+
+          <div className="flex-1 overflow-y-auto px-2">
+            <div className="sidebar-text px-2 py-2 text-[11px] uppercase tracking-[0.18em] text-[var(--text-muted)]">
+              Your chats
+            </div>
+            <div className="space-y-2">
+	              {groups.map(({ root }) => (
+	                <div key={root.id} className="space-y-1">
+	                  <div
+	                    className={`group flex h-11 items-center justify-between rounded-lg px-3 text-sm transition ${
+	                      activeThreadId === root.id
+	                        ? "bg-[var(--panel-2)] text-[var(--text-primary)]"
+	                        : "text-[var(--text-secondary)] hover:bg-[var(--panel)]"
+	                    }`}
+	                  >
+	                    <button
+	                      onClick={() => onSelect(root.id)}
+	                      className="flex min-w-0 flex-1 items-center gap-2 text-left"
+	                    >
+	                      <Folder className="h-4 w-4 shrink-0 text-[var(--text-muted)]" />
+	                      <div className="sidebar-text min-w-0 truncate">
+	                        {root.title || "Main chat"}
+	                      </div>
+	                    </button>
+                    <button
+                      onClick={() => onDeleteThread(root)}
+                      className="ml-2 rounded-full border border-transparent p-1 text-[var(--text-muted)] opacity-0 transition hover:border-[var(--border)] hover:text-[var(--danger)] group-hover:opacity-100"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="border-t border-[var(--border)] px-4 py-4 text-xs text-[var(--text-muted)]">
+            <span className="sidebar-text">Local mode</span>
+          </div>
+        </>
+      ) : (
+        <div className="flex-1 px-2 pb-4 pt-4">
+          <div className="sidebar-collapsed-stack">
+            <button
+              className="sidebar-icon-button"
+              onClick={onToggleCollapse}
+              title="Expand sidebar"
+            >
+              <PanelLeftClose className="h-5 w-5 rotate-180" />
+            </button>
+            <button
+              className="sidebar-icon-button"
+              onClick={onNewChat}
+              title="New chat"
+            >
+              <PenSquare className="h-5 w-5" />
+            </button>
+            <button
+              className="sidebar-icon-button"
+              title="Search chats"
+              onClick={onOpenSearch}
+            >
+              <Search className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+      )}
+    </aside>
+  );
+}

package/template/src/components/TopBar.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { ChevronDown, MessageSquare, Settings, Waypoints } from "lucide-react";
+import type { ModelConnection } from "../lib/types";
+import { getModelDisplayLabel } from "../lib/model-presets";
+
+export default function TopBar({
+  connectionId,
+  connectionName,
+  connection,
+  connections,
+  model,
+  localToolsEnabled,
+  onConnectionChange,
+  onModelChange,
+  viewMode,
+  onToggleView,
+  onEnableLocalTools,
+  onOpenSettings,
+  modelPresets,
+}: {
+  connectionId: string;
+  connectionName: string;
+  connection: ModelConnection | null;
+  connections: ModelConnection[];
+  model: string;
+  localToolsEnabled: boolean;
+  onConnectionChange: (connectionId: string) => void;
+  onModelChange: (model: string) => void;
+  viewMode: "chat" | "map";
+  onToggleView: () => void;
+  onEnableLocalTools: () => void | Promise<void>;
+  onOpenSettings: () => void;
+  modelPresets: string[];
+}) {
+  const effectiveModelOptions = modelPresets;
+  const selectedModelLabel = getModelDisplayLabel(model, connection);
+  const [connectionMenuOpen, setConnectionMenuOpen] = useState(false);
+  const [modelMenuOpen, setModelMenuOpen] = useState(false);
+  const connectionMenuRef = useRef<HTMLDivElement | null>(null);
+  const modelMenuRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!connectionMenuOpen && !modelMenuOpen) {
+      return;
+    }
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!connectionMenuRef.current?.contains(event.target as Node)) {
+        setConnectionMenuOpen(false);
+      }
+      if (!modelMenuRef.current?.contains(event.target as Node)) {
+        setModelMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    return () => document.removeEventListener("mousedown", handlePointerDown);
+  }, [connectionMenuOpen, modelMenuOpen]);
+
+  return (
+    <div className="topbar flex flex-wrap items-start justify-between gap-2 px-3 py-3 sm:items-center sm:px-4 sm:py-4">
+      <div className="flex min-w-0 flex-1 items-center gap-2 sm:gap-3">
+        <div className="flex min-w-0 max-w-full flex-wrap items-center gap-2 rounded-2xl border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-sm text-[var(--text-secondary)] sm:rounded-full sm:px-4">
+          <div className="relative" ref={connectionMenuRef}>
+            <button
+              type="button"
+              onClick={() => setConnectionMenuOpen((current) => !current)}
+              className="inline-flex max-w-[42vw] items-center gap-2 rounded-md px-1.5 py-1 text-left sm:max-w-[240px] sm:px-2"
+              aria-haspopup="listbox"
+              aria-expanded={connectionMenuOpen}
+              aria-label="Model provider"
+            >
+              <span className="truncate">{connectionName}</span>
+              <ChevronDown className={`h-4 w-4 text-[var(--text-muted)] ${connectionMenuOpen ? "rotate-180" : ""}`} />
+            </button>
+            {connectionMenuOpen ? (
+              <div className="model-menu top-full mt-2 max-h-80 overflow-y-auto">
+                {connections.map((connection) => (
+                  <button
+                    key={connection.id}
+                    className={`model-menu-item ${connection.id === connectionId ? "active" : ""}`}
+                    onClick={() => {
+                      onConnectionChange(connection.id);
+                      setConnectionMenuOpen(false);
+                    }}
+                    role="option"
+                    aria-selected={connection.id === connectionId}
+                  >
+                    {connection.name}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+          <span className="text-[var(--text-muted)]">|</span>
+          <div className="relative" ref={modelMenuRef}>
+            <button
+              type="button"
+              onClick={() => setModelMenuOpen((current) => !current)}
+              className="inline-flex max-w-[44vw] items-center gap-2 rounded-md px-1.5 py-1 text-left text-[var(--text-primary)] sm:max-w-[280px] sm:px-2"
+              aria-haspopup="listbox"
+              aria-expanded={modelMenuOpen}
+              aria-label={`${connectionName} model`}
+            >
+              <span className="truncate">{selectedModelLabel}</span>
+              <ChevronDown className={`h-4 w-4 text-[var(--text-muted)] ${modelMenuOpen ? "rotate-180" : ""}`} />
+            </button>
+            {modelMenuOpen ? (
+              <div className="model-menu top-full mt-2 max-h-80 overflow-y-auto">
+                {effectiveModelOptions.map((preset) => (
+                  <button
+                    key={preset}
+                    className={`model-menu-item ${preset === model ? "active" : ""}`}
+                    onClick={() => {
+                      onModelChange(preset);
+                      setModelMenuOpen(false);
+                    }}
+                    role="option"
+                    aria-selected={preset === model}
+                  >
+                    {getModelDisplayLabel(preset, connection)}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-2 self-start sm:self-auto">
+        {!localToolsEnabled ? (
+          <button
+            className="rounded-full border border-emerald-400/40 bg-emerald-500/10 px-3 py-2 text-xs text-emerald-200 hover:border-emerald-300/60 sm:px-4 sm:text-sm"
+            onClick={onEnableLocalTools}
+            title="Enable local tools so chat can perform file/app/notes actions."
+          >
+            Enable Local Tools
+          </button>
+        ) : null}
+        <button
+          className="flex items-center gap-1.5 rounded-full border border-[var(--border)] bg-[var(--bg)] px-3 py-2 text-xs text-[var(--text-secondary)] hover:border-[var(--border-strong)] sm:gap-2 sm:px-4 sm:text-sm"
+          onClick={onToggleView}
+        >
+          {viewMode === "chat" ? (
+            <>
+              <Waypoints className="h-5 w-5" />
+              <span className="hidden sm:inline">Map</span>
+            </>
+          ) : (
+            <>
+              <MessageSquare className="h-5 w-5" />
+              <span className="hidden sm:inline">Chat</span>
+            </>
+          )}
+        </button>
+        <button
+          className="rounded-full border border-[var(--border)] bg-[var(--bg)] p-2.5 text-[var(--text-secondary)] hover:border-[var(--border-strong)]"
+          onClick={onOpenSettings}
+        >
+          <Settings className="h-5 w-5" />
+        </button>
+      </div>
+    </div>
+  );
+}

package/template/src/lib/connections.ts

@@ -0,0 +1,275 @@
+import type {
+  BuiltInProvider,
+  ChatConnectionPayload,
+  ConnectionHeader,
+  ModelConnection,
+  Settings,
+} from "./types";
+
+export const BUILTIN_CONNECTION_IDS = {
+  openai: "builtin-openai",
+  anthropic: "builtin-anthropic",
+  google: "builtin-google",
+} as const;
+
+export const GEMINI_OPENAI_BASE_URL =
+  "https://generativelanguage.googleapis.com/v1beta/openai";
+
+const DEFAULT_MODEL_BY_PROVIDER: Record<BuiltInProvider, string> = {
+  openai: "gpt-5.2",
+  anthropic: "claude-sonnet-4-5",
+  google: "gemini-2.5-flash",
+};
+
+function builtinProviderName(provider: BuiltInProvider): string {
+  if (provider === "openai") {
+    return "OpenAI";
+  }
+  if (provider === "anthropic") {
+    return "Anthropic";
+  }
+  return "Google";
+}
+
+function trimHeaders(headers: ConnectionHeader[] | undefined): ConnectionHeader[] {
+  if (!Array.isArray(headers)) {
+    return [];
+  }
+  return headers
+    .filter((header) => header && typeof header === "object")
+    .map((header) => ({
+      key: typeof header.key === "string" ? header.key.trim() : "",
+      value: typeof header.value === "string" ? header.value.trim() : "",
+    }))
+    .filter((header) => header.key.length > 0);
+}
+
+export function supportsToolsByDefault(connection: {
+  kind: ModelConnection["kind"];
+  provider?: BuiltInProvider;
+}): boolean {
+  if (connection.kind === "ollama") {
+    return false;
+  }
+  if (connection.kind === "builtin" && connection.provider === "google") {
+    return true;
+  }
+  return true;
+}
+
+export function createBuiltinConnection(params: {
+  provider: BuiltInProvider;
+  apiKey?: string;
+  now?: number;
+}): ModelConnection {
+  const now = params.now ?? Date.now();
+  const id = BUILTIN_CONNECTION_IDS[params.provider];
+  const baseUrl = params.provider === "google" ? GEMINI_OPENAI_BASE_URL : undefined;
+  return {
+    id,
+    name: builtinProviderName(params.provider),
+    kind: "builtin",
+    provider: params.provider,
+    baseUrl,
+    apiKey: params.apiKey?.trim() || undefined,
+    headers: [],
+    supportsTools: true,
+    enabled: true,
+    createdAt: now,
+    updatedAt: now,
+  };
+}
+
+export function normalizeConnection(input: ModelConnection, now = Date.now()): ModelConnection {
+  const normalizedKind =
+    input.kind === "builtin" || input.kind === "openai_compatible" || input.kind === "ollama"
+      ? input.kind
+      : "openai_compatible";
+  const normalizedProvider =
+    normalizedKind === "builtin" &&
+    (input.provider === "openai" || input.provider === "anthropic" || input.provider === "google")
+      ? input.provider
+      : undefined;
+  const apiKey = typeof input.apiKey === "string" && input.apiKey.trim() ? input.apiKey.trim() : undefined;
+  const baseUrl =
+    typeof input.baseUrl === "string" && input.baseUrl.trim() ? input.baseUrl.trim() : undefined;
+  const headers = trimHeaders(input.headers);
+  const supportsTools =
+    typeof input.supportsTools === "boolean"
+      ? input.supportsTools
+      : supportsToolsByDefault({ kind: normalizedKind, provider: normalizedProvider });
+
+  return {
+    id: input.id,
+    name:
+      normalizedKind === "builtin" && normalizedProvider
+        ? builtinProviderName(normalizedProvider)
+        : input.name?.trim() || input.id,
+    kind: normalizedKind,
+    provider: normalizedProvider,
+    baseUrl: normalizedKind === "builtin" && normalizedProvider === "google" ? GEMINI_OPENAI_BASE_URL : baseUrl,
+    apiKey,
+    headers,
+    supportsTools,
+    enabled: typeof input.enabled === "boolean" ? input.enabled : true,
+    createdAt: Number.isFinite(input.createdAt) ? input.createdAt : now,
+    updatedAt: now,
+  };
+}
+
+export function ensureBuiltinConnections(
+  connections: ModelConnection[],
+  keys: { openaiKey?: string; anthropicKey?: string; geminiKey?: string },
+  now = Date.now(),
+): ModelConnection[] {
+  const map = new Map(connections.map((connection) => [connection.id, connection]));
+
+  const requiredBuiltins: Array<{ provider: BuiltInProvider; apiKey?: string }> = [
+    { provider: "openai", apiKey: keys.openaiKey },
+    { provider: "anthropic", apiKey: keys.anthropicKey },
+    { provider: "google", apiKey: keys.geminiKey },
+  ];
+
+  for (const builtin of requiredBuiltins) {
+    const id = BUILTIN_CONNECTION_IDS[builtin.provider];
+    const existing = map.get(id);
+    if (!existing) {
+      map.set(id, createBuiltinConnection({ provider: builtin.provider, apiKey: builtin.apiKey, now }));
+      continue;
+    }
+
+    if (!existing.apiKey && builtin.apiKey) {
+      map.set(id, normalizeConnection({ ...existing, apiKey: builtin.apiKey, updatedAt: now }, now));
+    }
+  }
+
+  return [...map.values()];
+}
+
+export function migrateLegacyConnections(settings: Partial<Settings>, now = Date.now()): {
+  connections: ModelConnection[];
+  defaultConnectionId: string;
+  defaultModelByConnection: Record<string, string>;
+} {
+  const legacyProvider = settings.defaultProvider ?? "openai";
+  const legacyModel = settings.defaultModel?.trim() || DEFAULT_MODEL_BY_PROVIDER[legacyProvider];
+
+  const incoming = Array.isArray(settings.connections) ? settings.connections : [];
+  const normalizedIncoming = incoming
+    .filter((connection) => connection && typeof connection === "object" && typeof connection.id === "string")
+    .map((connection) => normalizeConnection(connection, now));
+  const connections = ensureBuiltinConnections(
+    normalizedIncoming,
+    {
+      openaiKey: settings.openaiKey,
+      anthropicKey: settings.anthropicKey,
+      geminiKey: settings.geminiKey,
+    },
+    now,
+  );
+
+  const enabled = connections.filter((connection) => connection.enabled);
+  const fallbackConnectionId = BUILTIN_CONNECTION_IDS[legacyProvider];
+  const defaultConnectionId =
+    (settings.defaultConnectionId &&
+      connections.some((connection) => connection.id === settings.defaultConnectionId)
+      ? settings.defaultConnectionId
+      : null) ||
+    (enabled.find((connection) => connection.id === fallbackConnectionId)?.id ?? enabled[0]?.id) ||
+    fallbackConnectionId;
+
+  const existingModelMap =
+    settings.defaultModelByConnection && typeof settings.defaultModelByConnection === "object"
+      ? settings.defaultModelByConnection
+      : {};
+  const defaultModelByConnection: Record<string, string> = {};
+
+  for (const connection of connections) {
+    const mapped = existingModelMap[connection.id];
+    if (typeof mapped === "string" && mapped.trim()) {
+      defaultModelByConnection[connection.id] = mapped.trim();
+      continue;
+    }
+    if (connection.id === fallbackConnectionId && legacyModel) {
+      defaultModelByConnection[connection.id] = legacyModel;
+      continue;
+    }
+    if (connection.kind === "builtin" && connection.provider) {
+      defaultModelByConnection[connection.id] = DEFAULT_MODEL_BY_PROVIDER[connection.provider];
+    }
+  }
+
+  return {
+    connections,
+    defaultConnectionId,
+    defaultModelByConnection,
+  };
+}
+
+export function resolveConnectionApiKey(settings: Settings, connection: ModelConnection): string | undefined {
+  if (connection.apiKey?.trim()) {
+    return connection.apiKey.trim();
+  }
+  if (connection.kind !== "builtin") {
+    return undefined;
+  }
+  if (connection.provider === "openai") {
+    return settings.openaiKey?.trim() || undefined;
+  }
+  if (connection.provider === "anthropic") {
+    return settings.anthropicKey?.trim() || undefined;
+  }
+  if (connection.provider === "google") {
+    return settings.geminiKey?.trim() || undefined;
+  }
+  return undefined;
+}
+
+export function toChatConnectionPayload(
+  connection: ModelConnection,
+  settings: Settings,
+): ChatConnectionPayload {
+  return {
+    id: connection.id,
+    name: connection.name,
+    kind: connection.kind,
+    provider: connection.provider,
+    baseUrl: connection.baseUrl,
+    apiKey: resolveConnectionApiKey(settings, connection),
+    headers: trimHeaders(connection.headers),
+    supportsTools:
+      typeof connection.supportsTools === "boolean"
+        ? connection.supportsTools
+        : supportsToolsByDefault(connection),
+  };
+}
+
+export function getEnabledConnections(settings: Settings | null): ModelConnection[] {
+  if (!settings?.connections?.length) {
+    return [];
+  }
+  return settings.connections.filter((connection) => connection.enabled);
+}
+
+export function getConnectionById(
+  settings: Settings | null,
+  connectionId: string | null | undefined,
+): ModelConnection | null {
+  if (!settings || !connectionId) {
+    return null;
+  }
+  return settings.connections.find((connection) => connection.id === connectionId) ?? null;
+}
+
+export function normalizeBaseUrl(value: string): string {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return "";
+  }
+  try {
+    const url = new URL(trimmed);
+    return url.toString().replace(/\/$/, "");
+  } catch {
+    return trimmed;
+  }
+}