@chat-js/cli 0.4.0 → 0.6.1

package/templates/chat-app/components/data-stream-handler.tsx

@@ -1,23 +1,44 @@
 "use client";
+import type { DataUIPart } from "ai";
 import { type Dispatch, type SetStateAction, useEffect, useRef } from "react";
+import type { ArtifactMetadata } from "@/components/create-artifact";
 import { useArtifact } from "@/hooks/use-artifact";
-import type { UiToolName } from "@/lib/ai/types";
+import type { CustomUIDataTypes, UiToolName } from "@/lib/ai/types";
+import {
+  codeArtifact,
+  getCodeArtifactMetadata,
+} from "@/lib/artifacts/code/client";
+import {
+  getSheetArtifactMetadata,
+  sheetArtifact,
+} from "@/lib/artifacts/sheet/client";
+import { textArtifact } from "@/lib/artifacts/text/client";
 import { useChatId } from "@/providers/chat-id-provider";
 import { useChatInput } from "@/providers/chat-input-provider";
 import { useSession } from "@/providers/session-provider";
-import { artifactDefinitions } from "./artifact-panel";
 import { useDataStream } from "./data-stream-provider";
 
+function createTypedMetadataSetter<M extends ArtifactMetadata>(
+  setMetadata: Dispatch<SetStateAction<ArtifactMetadata>>,
+  coerce: (metadata: ArtifactMetadata) => M
+): Dispatch<SetStateAction<M>> {
+  return (value) => {
+    setMetadata((current) => {
+      const typedCurrent = coerce(current);
+      return typeof value === "function" ? value(typedCurrent) : value;
+    });
+  };
+}
+
 function handleResearchUpdate({
   delta,
   setSelectedTool,
 }: {
-  delta: any;
+  delta: DataUIPart<CustomUIDataTypes>;
   setSelectedTool: Dispatch<SetStateAction<UiToolName | null>>;
 }): void {
   if (delta.type === "data-researchUpdate") {
-    // TODO: fix this type
-    const update: any = (delta as any).data;
+    const update = delta.data;
     if (update?.type === "completed") {
       setSelectedTool((current) =>
         current === "deepResearch" ? null : current
@@ -36,21 +57,41 @@ function processArtifactStreamPart({
   setArtifact,
   setMetadata,
 }: {
-  delta: any;
+  delta: DataUIPart<CustomUIDataTypes>;
   artifact: ReturnType<typeof useArtifact>["artifact"];
   setArtifact: ReturnType<typeof useArtifact>["setArtifact"];
   setMetadata: ReturnType<typeof useArtifact>["setMetadata"];
 }): void {
-  const artifactDefinition = artifactDefinitions.find(
-    (definition) => definition.kind === artifact.kind
-  );
-
-  if (artifactDefinition?.onStreamPart) {
-    artifactDefinition.onStreamPart({
-      streamPart: delta,
-      setArtifact,
-      setMetadata,
-    });
+  switch (artifact.kind) {
+    case "code":
+      codeArtifact.onStreamPart?.({
+        streamPart: delta,
+        setArtifact,
+        setMetadata: createTypedMetadataSetter(
+          setMetadata,
+          getCodeArtifactMetadata
+        ),
+      });
+      break;
+    case "sheet":
+      sheetArtifact.onStreamPart?.({
+        streamPart: delta,
+        setArtifact,
+        setMetadata: createTypedMetadataSetter(
+          setMetadata,
+          getSheetArtifactMetadata
+        ),
+      });
+      break;
+    case "text":
+      textArtifact.onStreamPart?.({
+        streamPart: delta,
+        setArtifact,
+        setMetadata,
+      });
+      break;
+    default:
+      break;
   }
 }
 

package/templates/chat-app/components/device-login-page.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { CheckCircle2, LoaderCircle } from "lucide-react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import authClient from "@/lib/auth-client";
+import { config } from "@/lib/config";
+import { isElectronTransferQuery } from "@/lib/electron-auth";
+
+type DeviceLoginState = "checking-session" | "transferring" | "waiting-for-app";
+
+const DEVICE_LOGIN_COMPLETED_PARAM = "done";
+
+export function DeviceLoginPage() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [state, setState] = useState<DeviceLoginState>("checking-session");
+  const transferStartedRef = useRef(false);
+
+  const query = useMemo(
+    () => Object.fromEntries(searchParams.entries()),
+    [searchParams]
+  );
+  const isCompletedView =
+    searchParams.get(DEVICE_LOGIN_COMPLETED_PARAM) === "1";
+
+  useEffect(() => {
+    if (isCompletedView) {
+      setState("waiting-for-app");
+      return;
+    }
+
+    if (!isElectronTransferQuery(query)) {
+      setState("waiting-for-app");
+      return;
+    }
+
+    let cancelled = false;
+
+    const checkSession = async () => {
+      const { data: session } = await authClient.getSession();
+
+      if (cancelled || transferStartedRef.current) {
+        return;
+      }
+
+      if (!session?.user) {
+        setState("waiting-for-app");
+        return;
+      }
+
+      transferStartedRef.current = true;
+      setState("transferring");
+
+      await authClient.electron.transferUser({
+        fetchOptions: {
+          query,
+          onSuccess: () => {
+            window.history.replaceState(
+              {},
+              "",
+              `${pathname}?${DEVICE_LOGIN_COMPLETED_PARAM}=1`
+            );
+            setState("waiting-for-app");
+          },
+          onError: () => {
+            transferStartedRef.current = false;
+            setState("waiting-for-app");
+          },
+        },
+      });
+    };
+
+    checkSession().catch(() => {
+      if (cancelled) {
+        return;
+      }
+
+      transferStartedRef.current = false;
+      setState("waiting-for-app");
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isCompletedView, pathname, query]);
+
+  return (
+    <DeviceAuthScreen
+      onRetry={() => {
+        transferStartedRef.current = false;
+        setState("transferring");
+        authClient.electron
+          .transferUser({
+            fetchOptions: {
+              query,
+              onSuccess: () => {
+                window.history.replaceState(
+                  {},
+                  "",
+                  `${pathname}?${DEVICE_LOGIN_COMPLETED_PARAM}=1`
+                );
+                setState("waiting-for-app");
+              },
+              onError: () => {
+                transferStartedRef.current = false;
+                setState("waiting-for-app");
+              },
+            },
+          })
+          .catch(() => {
+            transferStartedRef.current = false;
+            setState("waiting-for-app");
+          });
+      }}
+      state={state}
+    />
+  );
+}
+
+function DeviceAuthScreen({
+  state,
+  onRetry,
+}: {
+  state: "checking-session" | "transferring" | "waiting-for-app";
+  onRetry: () => void;
+}) {
+  const isLoading = state === "checking-session" || state === "transferring";
+  let title = "You're signed in";
+
+  if (isLoading) {
+    title =
+      state === "checking-session"
+        ? "Checking your session..."
+        : "Opening the desktop app...";
+  }
+
+  return (
+    <div className="flex min-h-dvh w-screen items-center justify-center bg-background">
+      <div className="w-full max-w-sm px-6">
+        <Card>
+          <CardHeader className="text-center">
+            <div className="mb-2 flex justify-center">
+              {isLoading ? (
+                <LoaderCircle className="size-8 animate-spin text-muted-foreground" />
+              ) : (
+                <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-foreground text-background">
+                  <CheckCircle2 className="size-7" />
+                </div>
+              )}
+            </div>
+            <CardTitle className="text-xl">{title}</CardTitle>
+            {!isLoading && (
+              <CardDescription>
+                You can close this tab and return to {config.appName}.
+              </CardDescription>
+            )}
+          </CardHeader>
+          {!isLoading && (
+            <CardContent className="text-center">
+              <div className="mb-4">
+                <Button asChild className="w-full" variant="outline">
+                  <a href="/">Continue on web</a>
+                </Button>
+              </div>
+              <p className="text-muted-foreground/60 text-xs">
+                Didn&apos;t open?{" "}
+                <Button
+                  className="h-auto p-0 text-muted-foreground/60 text-xs underline underline-offset-2 hover:text-muted-foreground hover:no-underline"
+                  onClick={onRetry}
+                  type="button"
+                  variant="link"
+                >
+                  Try again
+                </Button>
+              </p>
+            </CardContent>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+}

package/templates/chat-app/components/diffview.tsx

@@ -9,6 +9,7 @@ import {
   $getRoot,
   type EditorConfig,
   type LexicalEditor,
+  type SerializedTextNode,
   TextNode,
 } from "lexical";
 import { useEffect } from "react";
@@ -23,6 +24,11 @@ const DiffType = {
 
 // Define diff types
 type DiffTypeValue = (typeof DiffType)[keyof typeof DiffType];
+type SerializedDiffTextNode = SerializedTextNode & {
+  diffType?: DiffTypeValue;
+  type: "diff-text";
+  version: 1;
+};
 
 // Custom diff text node that supports styling
 class DiffTextNode extends TextNode {
@@ -38,7 +44,7 @@ class DiffTextNode extends TextNode {
     return newNode;
   }
 
-  static importJSON(serializedNode: any): DiffTextNode {
+  static importJSON(serializedNode: SerializedDiffTextNode): DiffTextNode {
     const { text, diffType } = serializedNode;
     const node = new DiffTextNode(text);
     if (diffType !== undefined) {
@@ -47,7 +53,7 @@ class DiffTextNode extends TextNode {
     return node;
   }
 
-  exportJSON(): any {
+  exportJSON(): SerializedDiffTextNode {
     return {
       ...super.exportJSON(),
       diffType: this.__diffType,

package/templates/chat-app/components/electron-auth-handler.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { AlertCircle, LoaderCircle } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import authClient from "@/lib/auth-client";
+import { config } from "@/lib/config";
+
+/**
+ * Handles the electron auth redirect after OAuth completes in the browser.
+ * When the user finishes OAuth, `ensureElectronRedirect` detects the
+ * electron redirect cookie and sends the user back to the Electron app
+ * via deep link.
+ *
+ * Mount this in the root layout so it runs on every page.
+ */
+export function ElectronAuthHandler() {
+  const isDesktopAppEnabled = config.desktopApp.enabled;
+  const router = useRouter();
+  const [authState, setAuthState] = useState<ElectronRendererAuthState>({
+    status: "idle",
+    message: null,
+  });
+
+  useEffect(() => {
+    if (!isDesktopAppEnabled) {
+      return;
+    }
+
+    const id = authClient.ensureElectronRedirect();
+    return () => clearInterval(id);
+  }, [isDesktopAppEnabled]);
+
+  useEffect(() => {
+    if (!isDesktopAppEnabled) {
+      return;
+    }
+
+    if (typeof window.requestAuth !== "function") {
+      return;
+    }
+
+    if (
+      typeof window.onAuthenticated !== "function" ||
+      typeof window.onUserUpdated !== "function" ||
+      typeof window.onAuthError !== "function" ||
+      typeof window.electronAPI?.onAuthStateChanged !== "function"
+    ) {
+      return;
+    }
+
+    const authStatePromise = window.electronAPI?.getAuthState?.();
+    authStatePromise
+      ?.then((state) => {
+        if (state) {
+          setAuthState(state);
+        }
+      })
+      ?.catch((error) => {
+        console.error("Failed to read Electron auth state", error);
+      });
+
+    const syncAndRefresh = async () => {
+      await window.electronAPI?.syncAuthSession?.();
+      router.refresh();
+    };
+
+    const unsubscribeAuthenticated = window.onAuthenticated(() => {
+      syncAndRefresh().catch((error) => {
+        console.error(
+          "Failed to sync auth session after authentication",
+          error
+        );
+      });
+    });
+    const unsubscribeUserUpdated = window.onUserUpdated(() => {
+      syncAndRefresh().catch((error) => {
+        console.error("Failed to sync auth session after user update", error);
+      });
+    });
+    const unsubscribeAuthError = window.onAuthError(
+      (ctx: ElectronAuthErrorContext) => {
+        toast.error(ctx.message || "Authentication failed");
+      }
+    );
+    const unsubscribeAuthState = window.electronAPI.onAuthStateChanged(
+      (state) => {
+        setAuthState(state);
+      }
+    );
+
+    return () => {
+      unsubscribeAuthenticated();
+      unsubscribeUserUpdated();
+      unsubscribeAuthError();
+      unsubscribeAuthState();
+    };
+  }, [isDesktopAppEnabled, router]);
+
+  if (!isDesktopAppEnabled) {
+    return null;
+  }
+
+  const overlayKey = `${authState.status}:${authState.message ?? ""}:${
+    authState.status === "idle" ? "" : (authState.detail ?? "")
+  }`;
+
+  return <ElectronAuthOverlay key={overlayKey} state={authState} />;
+}
+
+function ElectronAuthOverlay({ state }: { state: ElectronRendererAuthState }) {
+  const [isDismissed, setIsDismissed] = useState(false);
+
+  if (state.status === "idle" || !state.message) {
+    return null;
+  }
+
+  const isLoading =
+    state.status === "awaiting-browser" || state.status === "finishing";
+  const canCancel = state.status === "awaiting-browser";
+  let detailMessage: string;
+
+  if (state.status === "awaiting-browser") {
+    detailMessage = "Complete sign-in in your browser, then come back here.";
+  } else if (state.status === "finishing") {
+    detailMessage =
+      "Your browser has returned to ChatJS. We're finalizing the session now.";
+  } else {
+    detailMessage =
+      state.detail || "If nothing changes, try the browser flow again.";
+  }
+
+  if (!isLoading && isDismissed) {
+    return null;
+  }
+
+  return (
+    <div className="pointer-events-auto fixed inset-0 z-[999999] flex items-center justify-center bg-background/90 px-4 backdrop-blur-sm">
+      <div className="w-full max-w-sm rounded-2xl border bg-background p-6 shadow-2xl">
+        <div className="flex items-start gap-3">
+          <div className="mt-0.5 text-muted-foreground">
+            {isLoading ? (
+              <LoaderCircle className="size-5 animate-spin" />
+            ) : (
+              <AlertCircle className="size-5 text-amber-600" />
+            )}
+          </div>
+          <div className="space-y-2">
+            <p className="font-medium">{state.message}</p>
+            <p className="text-muted-foreground text-sm">{detailMessage}</p>
+            {canCancel ? (
+              <Button
+                className="mt-2"
+                onClick={() => {
+                  window.electronAPI?.cancelAuthFlow?.().catch((error) => {
+                    console.error("Failed to cancel Electron auth flow", error);
+                  });
+                }}
+                size="sm"
+                type="button"
+                variant="outline"
+              >
+                Go back
+              </Button>
+            ) : null}
+            {isLoading ? null : (
+              <Button
+                className="mt-2"
+                onClick={() => setIsDismissed(true)}
+                size="sm"
+                type="button"
+                variant="outline"
+              >
+                Dismiss
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/chat-app/components/electron-auth-ui.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { ExternalLink, LoaderCircle } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useRef, useState, useTransition } from "react";
+import config from "@/chat.config";
+import type { Session } from "@/lib/auth";
+import authClient from "@/lib/auth-client";
+import { Button } from "./ui/button";
+
+export function ElectronBrowserSignIn({
+  buttonLabel = "Continue with browser",
+}: {
+  buttonLabel?: string;
+}) {
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <div className="space-y-3">
+      <p className="text-center text-muted-foreground text-sm">
+        Sign-in opens in your browser. On macOS, {config.appName} may ask to use
+        Keychain so it can store your session securely.
+      </p>
+      <Button
+        className="w-full"
+        onClick={() => {
+          const requestAuth = window.requestAuth;
+          if (typeof requestAuth !== "function") {
+            return;
+          }
+          Promise.resolve()
+            .then(() => requestAuth())
+            .catch((error) => {
+              console.error("Failed to launch browser sign-in", error);
+            });
+          window.setTimeout(() => setOpened(true), 300);
+        }}
+        type="button"
+        variant="outline"
+      >
+        <ExternalLink className="mr-2 size-4" />
+        {buttonLabel}
+      </Button>
+
+      {opened ? (
+        <p className="text-center text-muted-foreground text-sm">
+          Finish signing in through your browser. If macOS asks about Keychain
+          access, allow it to keep your session saved securely.
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function ElectronTransferUser({
+  query,
+  session,
+}: {
+  query: Record<string, string>;
+  session: Session;
+}) {
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter();
+  const hasStartedTransferRef = useRef(false);
+  const useAnotherAccountHref = useMemo(() => {
+    const params = new URLSearchParams(query);
+    params.delete("client_id");
+    params.delete("state");
+    params.delete("code_challenge");
+    params.delete("code_challenge_method");
+
+    const nextQuery = params.toString();
+    return nextQuery ? `/login?${nextQuery}` : "/login";
+  }, [query]);
+
+  useEffect(() => {
+    if (hasStartedTransferRef.current) {
+      return;
+    }
+    hasStartedTransferRef.current = true;
+
+    startTransition(async () => {
+      await authClient.electron.transferUser({ fetchOptions: { query } });
+      router.refresh();
+    });
+  }, [query, router]);
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-lg border px-4 py-3 text-sm">
+        <p className="font-medium">{session.user.name || session.user.email}</p>
+        <p className="text-muted-foreground">{session.user.email}</p>
+      </div>
+
+      <Button
+        className="w-full"
+        disabled={isPending}
+        onClick={() => {
+          startTransition(async () => {
+            await authClient.electron.transferUser({ fetchOptions: { query } });
+            router.refresh();
+          });
+        }}
+        type="button"
+      >
+        {isPending ? (
+          <>
+            <LoaderCircle className="mr-2 size-4 animate-spin" />
+            Connecting…
+          </>
+        ) : (
+          "Continue to desktop app"
+        )}
+      </Button>
+
+      <Button asChild className="w-full" variant="ghost">
+        <a href={useAnotherAccountHref}>Use another account</a>
+      </Button>
+    </div>
+  );
+}

package/templates/chat-app/components/favicon-group.tsx

@@ -27,7 +27,7 @@ export const FaviconGroup: React.FC<FaviconGroupProps> = ({
         <Favicon
           alt={`Favicon for ${source.title || new URL(source.url).hostname}`}
           className={cn(
-            "h-5 w-5 rounded-full border-2 border-white dark:border-neutral-800", // Slightly thicker border for contrast
+            "h-5 w-5 rounded-full border-2 border-background",
             index > 0 ? "-ml-2" : ""
           )}
           key={source.url || index}

package/templates/chat-app/components/feedback-actions.tsx

@@ -2,7 +2,7 @@ import { useMessageById } from "@ai-sdk-tools/store";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { ThumbsDown, ThumbsUp } from "lucide-react";
 import { toast } from "sonner";
-import { getPrimarySelectedModelId, type ChatMessage } from "@/lib/ai/types";
+import { type ChatMessage, getPrimarySelectedModelId } from "@/lib/ai/types";
 import type { Vote } from "@/lib/db/schema";
 import { useSession } from "@/providers/session-provider";
 import { useTRPC } from "@/trpc/react";

package/templates/chat-app/components/greeting.tsx

@@ -16,7 +16,7 @@ export const Greeting = () => (
     </motion.div>
     <motion.div
       animate={{ opacity: 1, y: 0 }}
-      className="text-2xl text-zinc-500"
+      className="text-2xl text-muted-foreground"
       exit={{ opacity: 0, y: 10 }}
       initial={{ opacity: 0, y: 10 }}
       transition={{ delay: 0.6 }}

package/templates/chat-app/components/interactive-chart-impl.tsx

@@ -82,8 +82,7 @@ function InteractiveChart({ chart }: { chart: BaseChart }) {
       backgroundColor: tooltipBg,
       borderWidth: 0,
       padding: [6, 10],
-      className:
-        "echarts-tooltip rounded-lg! border! border-neutral-200! dark:border-neutral-800!",
+      className: "echarts-tooltip rounded-lg! border! border-border!",
       textStyle: {
         color: textColor,
         fontSize: 13,
@@ -247,10 +246,10 @@ function InteractiveChart({ chart }: { chart: BaseChart }) {
       initial={{ opacity: 0, y: 20 }}
       transition={{ duration: 0.5 }}
     >
-      <Card className="overflow-hidden border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
+      <Card className="overflow-hidden border-border bg-card">
         <div className="p-6">
           {chart.title && (
-            <h3 className="mb-4 font-medium text-lg text-neutral-900 dark:text-neutral-100">
+            <h3 className="mb-4 font-medium text-foreground text-lg">
               {chart.title}
             </h3>
           )}