@xenide-io/the-old-ui-theme 0.4.4 → 0.4.6

package/src/suite/components/ai-panel.tsx

@@ -1,60 +1,157 @@
 'use client';
 
-import { useState, type ComponentType, type ReactNode } from 'react';
-import { Check, Copy, Xmark as X } from 'iconoir-react';
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentType,
+  type ReactNode,
+} from 'react';
+import { Check, Copy, Sparks, Xmark as X } from 'iconoir-react';
+
+export const SUITE_OPEN_ASK_AI_EVENT = 'shellstack:open-ask-ai';
+
+export type SuiteAskAiOpenDetail = {
+  prompt?: string;
+};
+
+/** Open the suite Ask AI panel from anywhere (Today card, command palette, …). */
+export function openSuiteAskAi(detail?: SuiteAskAiOpenDetail): void {
+  if (typeof window === 'undefined') return;
+  window.dispatchEvent(
+    new CustomEvent<SuiteAskAiOpenDetail>(SUITE_OPEN_ASK_AI_EVENT, {
+      detail: detail ?? {},
+    }),
+  );
+}
 
 export interface SuiteAiPreset {
   label: string;
   prompt: string;
 }
 
+export interface SuiteAiChatMessage {
+  role: 'user' | 'assistant';
+  content: string;
+  created_at?: string;
+}
+
 /**
- * Thin ShellStack AI slide-over shared by suite apps.
+ * Suite-wide Ask AI slide-over — Notion-style continuous chat.
  *
- * One-shot completions via the shared `/api/ai/complete` endpoint. Apps
- * inject their API helpers, preset prompts, brand icon and spinner. Renders
- * its own floating launcher so it can be mounted once in the authenticated
- * app shell.
+ * One thread per workspace (persisted via injected fetch/send/clear helpers).
+ * Not Kraken Deep Research. Apps mount this once in the authenticated shell.
  */
 export function SuiteAiPanel({
-  presets,
-  emptyState,
-  fetchStatus,
-  complete,
+  presets = [],
+  emptyState = 'Ask anything about your workspace, or look something up online.',
+  title = 'Ask AI',
+  fetchChat,
+  sendMessage,
+  clearChat,
   brandIcon: BrandIcon,
   spinner: Spinner,
+  hideLauncher = false,
 }: {
-  presets: SuiteAiPreset[];
-  /** Idle-state hint copy shown before the first request. */
-  emptyState: ReactNode;
-  fetchStatus: () => Promise<{ configured: boolean }>;
-  complete: (params: { prompt: string }) => Promise<{ text: string }>;
-  brandIcon: ComponentType<{ className?: string }>;
+  presets?: SuiteAiPreset[];
+  emptyState?: ReactNode;
+  title?: string;
+  fetchChat: () => Promise<{
+    messages: SuiteAiChatMessage[];
+    configured: boolean;
+  }>;
+  sendMessage: (params: {
+    prompt: string;
+  }) => Promise<{ messages: SuiteAiChatMessage[]; reply: string }>;
+  clearChat: () => Promise<void>;
+  brandIcon?: ComponentType<{ className?: string }>;
   spinner: ComponentType<{ className?: string }>;
+  /** When true, only Today / events open the panel (no floating button). */
+  hideLauncher?: boolean;
 }) {
   const [open, setOpen] = useState(false);
   const [prompt, setPrompt] = useState('');
+  const [messages, setMessages] = useState<SuiteAiChatMessage[]>([]);
   const [loading, setLoading] = useState(false);
-  const [answer, setAnswer] = useState('');
+  const [hydrating, setHydrating] = useState(false);
   const [error, setError] = useState('');
-  const [copied, setCopied] = useState(false);
+  const [copiedId, setCopiedId] = useState<number | null>(null);
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const pendingPromptRef = useRef<string | null>(null);
+
+  const scrollToBottom = useCallback(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, []);
+
+  const hydrate = useCallback(async () => {
+    setHydrating(true);
+    setError('');
+    try {
+      const data = await fetchChat();
+      setMessages(data.messages ?? []);
+      if (!data.configured) {
+        setError('ShellStack AI is not configured for this workspace yet.');
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Could not load your Ask AI chat.',
+      );
+    } finally {
+      setHydrating(false);
+    }
+  }, [fetchChat]);
+
+  useEffect(() => {
+    function onOpen(event: Event) {
+      const detail = (event as CustomEvent<SuiteAskAiOpenDetail>).detail;
+      setOpen(true);
+      if (detail?.prompt?.trim()) {
+        pendingPromptRef.current = detail.prompt.trim();
+        setPrompt(detail.prompt.trim());
+      }
+    }
+    window.addEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
+    return () => window.removeEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    void hydrate().then(() => {
+      const pending = pendingPromptRef.current;
+      pendingPromptRef.current = null;
+      if (pending) {
+        // Leave prompt filled; user can send, or auto-send on next tick.
+        setPrompt(pending);
+      }
+    });
+  }, [open, hydrate]);
+
+  useEffect(() => {
+    if (open) scrollToBottom();
+  }, [messages, loading, open, scrollToBottom]);
 
   async function ask(text: string) {
     const trimmed = text.trim();
     if (!trimmed || loading) return;
     setLoading(true);
     setError('');
-    setAnswer('');
-    setCopied(false);
+    setPrompt('');
+    // Optimistic user bubble — replaced by server messages on success.
+    setMessages((prev) => [...prev, { role: 'user', content: trimmed }]);
     try {
-      const status = await fetchStatus();
-      if (!status.configured) {
-        setError('ShellStack AI is not configured for this workspace yet.');
-        return;
-      }
-      const result = await complete({ prompt: trimmed });
-      setAnswer(result.text);
+      const result = await sendMessage({ prompt: trimmed });
+      setMessages(result.messages ?? []);
     } catch (err) {
+      setMessages((prev) =>
+        prev[prev.length - 1]?.role === 'user' &&
+        prev[prev.length - 1]?.content === trimmed
+          ? prev.slice(0, -1)
+          : prev,
+      );
+      setPrompt(trimmed);
       setError(
         err instanceof Error
           ? err.message
@@ -65,107 +162,174 @@ export function SuiteAiPanel({
     }
   }
 
-  async function copyAnswer() {
-    if (!answer) return;
+  async function handleClear() {
+    if (loading) return;
+    try {
+      await clearChat();
+      setMessages([]);
+      setError('');
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Could not clear this chat.',
+      );
+    }
+  }
+
+  async function copyMessage(index: number, content: string) {
     try {
-      await navigator.clipboard.writeText(answer);
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 1500);
+      await navigator.clipboard.writeText(content);
+      setCopiedId(index);
+      window.setTimeout(() => setCopiedId(null), 1500);
     } catch {
-      // Clipboard unavailable; ignore.
+      // Clipboard unavailable.
     }
   }
 
+  const Icon = BrandIcon ?? Sparks;
+
   return (
     <>
-      <button
-        type="button"
-        data-test="ai-panel-launcher"
-        onClick={() => setOpen(true)}
-        className="fixed bottom-5 right-5 z-30 flex items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
-        aria-label="Open ShellStack AI"
-      >
-        <BrandIcon className="h-4 w-4 text-ph-brand" />
-        Ask AI
-      </button>
-
-      {open && (
+      {!hideLauncher ? (
+        <button
+          type="button"
+          data-test="ai-panel-launcher"
+          onClick={() => setOpen(true)}
+          className="fixed bottom-5 right-5 z-30 flex items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+          aria-label="Open Ask AI"
+        >
+          <Icon className="h-4 w-4 text-ph-brand" />
+          Ask AI
+        </button>
+      ) : null}
+
+      {open ? (
         <div className="fixed inset-0 z-40" role="dialog" aria-modal="true">
           <button
             type="button"
             className="absolute inset-0 bg-black/25"
             onClick={() => setOpen(false)}
-            aria-label="Close AI panel"
+            aria-label="Close Ask AI"
           />
-          <aside className="absolute inset-y-0 right-0 flex w-full max-w-md flex-col border-l border-ph-border bg-ph-surface shadow-2xl">
+          <aside
+            className="absolute inset-y-0 right-0 flex w-full max-w-md flex-col border-l border-ph-border bg-ph-surface shadow-2xl"
+            data-test="suite-ask-ai-panel"
+          >
             <div className="flex items-center justify-between border-b border-ph-border px-4 py-3">
-              <div className="flex items-center gap-2">
-                <BrandIcon className="h-4 w-4 text-ph-brand" />
-                <span className="text-sm font-semibold text-ph-ink">
-                  ShellStack AI
-                </span>
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <Icon className="h-4 w-4 shrink-0 text-ph-brand" />
+                  <span className="text-sm font-semibold text-ph-ink">
+                    {title}
+                  </span>
+                </div>
+                <p className="mt-0.5 text-[11px] text-ph-mutedtext">
+                  Shared across your suite · same chat in every app
+                </p>
               </div>
-              <button
-                type="button"
-                onClick={() => setOpen(false)}
-                className="rounded p-1 hover:bg-ph-muted"
-                aria-label="Close"
-              >
-                <X className="h-4 w-4" />
-              </button>
-            </div>
-
-            <div className="flex flex-wrap gap-1.5 border-b border-ph-border px-4 py-2">
-              {presets.map((preset) => (
+              <div className="flex items-center gap-1">
+                {messages.length > 0 ? (
+                  <button
+                    type="button"
+                    onClick={() => void handleClear()}
+                    disabled={loading}
+                    className="rounded-md px-2 py-1 text-xs text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink disabled:opacity-50"
+                    data-test="ask-ai-clear"
+                  >
+                    Clear
+                  </button>
+                ) : null}
                 <button
-                  key={preset.label}
                   type="button"
-                  onClick={() => {
-                    setPrompt(preset.prompt);
-                    void ask(preset.prompt);
-                  }}
-                  disabled={loading}
-                  className="rounded-md border border-ph-border px-2 py-1 text-xs text-ph-ink hover:bg-ph-muted disabled:opacity-50"
+                  onClick={() => setOpen(false)}
+                  className="rounded p-1 hover:bg-ph-muted"
+                  aria-label="Close"
                 >
-                  {preset.label}
+                  <X className="h-4 w-4" />
                 </button>
-              ))}
+              </div>
             </div>
 
-            <div className="flex-1 space-y-3 overflow-y-auto p-4">
-              {error && (
+            {presets.length > 0 && messages.length === 0 ? (
+              <div className="flex flex-wrap gap-1.5 border-b border-ph-border px-4 py-2">
+                {presets.map((preset) => (
+                  <button
+                    key={preset.label}
+                    type="button"
+                    onClick={() => void ask(preset.prompt)}
+                    disabled={loading || hydrating}
+                    className="rounded-full border border-ph-border px-2.5 py-1 text-xs text-ph-ink hover:bg-ph-muted disabled:opacity-50"
+                  >
+                    {preset.label}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+
+            <div
+              ref={scrollerRef}
+              className="flex-1 space-y-3 overflow-y-auto p-4"
+            >
+              {error ? (
                 <p className="bg-ph-danger/10 rounded-lg px-3 py-2 text-sm text-ph-danger">
                   {error}
                 </p>
-              )}
-              {loading && (
+              ) : null}
+
+              {hydrating && messages.length === 0 ? (
                 <div className="flex items-center gap-2 text-sm text-ph-mutedtext">
                   <Spinner className="h-4 w-4 animate-spin" />
-                  Thinking…
+                  Loading chat…
                 </div>
-              )}
-              {answer && !loading && (
-                <div className="rounded-lg bg-ph-muted px-3 py-2 text-sm text-ph-ink">
-                  <p className="whitespace-pre-wrap">{answer}</p>
-                  <button
-                    type="button"
-                    onClick={() => void copyAnswer()}
-                    className="mt-2 inline-flex items-center gap-1 text-xs text-ph-mutedtext hover:text-ph-ink"
+              ) : null}
+
+              {!hydrating && messages.length === 0 && !error ? (
+                <div className="mt-10 px-2 text-center">
+                  <p className="font-display text-base font-semibold text-ph-ink">
+                    How can I help?
+                  </p>
+                  <p className="mt-2 text-sm leading-relaxed text-ph-subtle">
+                    {emptyState}
+                  </p>
+                </div>
+              ) : null}
+
+              {messages.map((message, index) => {
+                const isUser = message.role === 'user';
+                return (
+                  <div
+                    key={`${message.role}-${index}-${message.content.slice(0, 24)}`}
+                    className={
+                      isUser
+                        ? 'ml-8 rounded-2xl bg-ph-brand/10 px-3.5 py-2.5 text-sm text-ph-ink'
+                        : 'mr-4 rounded-2xl bg-ph-muted px-3.5 py-2.5 text-sm text-ph-ink'
+                    }
+                    data-test={isUser ? 'ask-ai-user' : 'ask-ai-assistant'}
                   >
-                    {copied ? (
-                      <Check className="h-3 w-3" />
-                    ) : (
-                      <Copy className="h-3 w-3" />
-                    )}
-                    {copied ? 'Copied' : 'Copy'}
-                  </button>
+                    <p className="whitespace-pre-wrap">{message.content}</p>
+                    {!isUser ? (
+                      <button
+                        type="button"
+                        onClick={() => void copyMessage(index, message.content)}
+                        className="mt-2 inline-flex items-center gap-1 text-xs text-ph-mutedtext hover:text-ph-ink"
+                      >
+                        {copiedId === index ? (
+                          <Check className="h-3 w-3" />
+                        ) : (
+                          <Copy className="h-3 w-3" />
+                        )}
+                        {copiedId === index ? 'Copied' : 'Copy'}
+                      </button>
+                    ) : null}
+                  </div>
+                );
+              })}
+
+              {loading ? (
+                <div className="flex items-center gap-2 text-sm text-ph-mutedtext">
+                  <Spinner className="h-4 w-4 animate-spin" />
+                  Thinking…
                 </div>
-              )}
-              {!answer && !loading && !error && (
-                <p className="mt-8 text-center text-xs text-ph-mutedtext">
-                  {emptyState}
-                </p>
-              )}
+              ) : null}
             </div>
 
             <div className="border-t border-ph-border p-3">
@@ -182,13 +346,15 @@ export function SuiteAiPanel({
                   placeholder="Ask anything…"
                   rows={2}
                   disabled={loading}
-                  className="flex-1 resize-none rounded-lg border border-ph-border bg-ph-canvas p-2 text-sm text-ph-ink outline-none focus:ring-1 focus:ring-ph-brand"
+                  data-test="ask-ai-input"
+                  className="flex-1 resize-none rounded-xl border border-ph-border bg-ph-canvas p-2.5 text-sm text-ph-ink outline-none focus:ring-1 focus:ring-ph-brand"
                 />
                 <button
                   type="button"
                   onClick={() => void ask(prompt)}
                   disabled={loading || !prompt.trim()}
-                  className="self-end rounded-lg bg-ph-brand px-3 py-2 text-sm font-medium text-white disabled:opacity-50"
+                  data-test="ask-ai-send"
+                  className="self-end rounded-xl bg-ph-brand px-3.5 py-2 text-sm font-medium text-white disabled:opacity-50"
                 >
                   Ask
                 </button>
@@ -196,7 +362,7 @@ export function SuiteAiPanel({
             </div>
           </aside>
         </div>
-      )}
+      ) : null}
     </>
   );
 }

package/src/suite/components/suite-app-layout.tsx

@@ -13,6 +13,11 @@ export interface SuiteAppLayoutProps {
   sidebarWidth?: number;
   /** True when the sidebar is collapsed to the icon rail. */
   collapsed?: boolean;
+  /**
+   * When true, `#main-content` does not scroll — the page owns an internal
+   * scrollport (e.g. Deep Research: fixed header + composer, chat scrolls).
+   */
+  lockMainScroll?: boolean;
   /** Drag this to resize the sidebar. */
   onStartResize?: (e: PointerEvent<HTMLDivElement>) => void;
   /** Double-click to reset sidebar width. */
@@ -21,10 +26,9 @@ export interface SuiteAppLayoutProps {
 }
 
 /**
- * Responsive ShellStack app shell. Desktop: resizable fixed sidebar +
- * scrollable content with an optional drag handle. Mobile/tablet: mobile
- * header + content + bottom nav. This is the single layout primitive every
- * app should use.
+ * Responsive ShellStack app shell. One content tree (no duplicate children),
+ * one `#main-content` landmark. Desktop: fixed sidebar + scrollable main.
+ * Mobile: header + main + bottom nav.
  */
 export function SuiteAppLayout({
   sidebar,
@@ -33,36 +37,52 @@ export function SuiteAppLayout({
   bottomNav,
   sidebarWidth = 240,
   collapsed = false,
+  lockMainScroll = false,
   onStartResize,
   onResetWidth,
   className,
 }: SuiteAppLayoutProps) {
   return (
-    <div data-test="app-shell" className={cn('min-h-screen', className)}>
-      <div className="hidden lg:flex h-screen overflow-hidden">
-        <aside
-          className="relative flex shrink-0 flex-col border-r border-ph-border transition-[width] duration-200 ease-out"
-          style={{ width: `${sidebarWidth}px` }}
-        >
-          {sidebar}
-          {onStartResize ? (
-            <div
-              role="separator"
-              aria-orientation="vertical"
-              aria-label="Resize sidebar"
-              onPointerDown={onStartResize}
-              onDoubleClick={onResetWidth}
-              className="absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
-            />
-          ) : null}
-        </aside>
-        <main className="min-w-0 flex-1 overflow-y-auto bg-ph-canvas">{children}</main>
-      </div>
+    <div
+      data-test="app-shell"
+      className={cn('flex min-h-dvh lg:h-screen lg:overflow-hidden', className)}
+    >
+      <aside
+        className="relative hidden shrink-0 flex-col overflow-hidden border-r border-ph-border transition-[width] duration-200 ease-out lg:flex"
+        style={{ width: `${sidebarWidth}px` }}
+        data-collapsed={collapsed ? 'true' : 'false'}
+      >
+        {sidebar}
+        {onStartResize ? (
+          <div
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize sidebar"
+            onPointerDown={onStartResize}
+            onDoubleClick={onResetWidth}
+            className="absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
+          />
+        ) : null}
+      </aside>
 
-      <div className="flex min-h-screen flex-col lg:hidden">
-        {mobileHeader ? <div className="shrink-0">{mobileHeader}</div> : null}
-        <main className="min-w-0 flex-1 overflow-y-auto bg-ph-canvas">{children}</main>
-        {bottomNav ? <div className="shrink-0">{bottomNav}</div> : null}
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+        {mobileHeader ? (
+          <div className="shrink-0 lg:hidden">{mobileHeader}</div>
+        ) : null}
+        <main
+          id="main-content"
+          tabIndex={-1}
+          data-lock-scroll={lockMainScroll ? 'true' : undefined}
+          className={cn(
+            'flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none',
+            lockMainScroll ? 'overflow-hidden' : 'overflow-y-auto',
+          )}
+        >
+          {children}
+        </main>
+        {bottomNav ? (
+          <div className="shrink-0 lg:hidden">{bottomNav}</div>
+        ) : null}
       </div>
     </div>
   );