@chat-js/cli 0.1.3 → 0.2.0

package/templates/chat-app/components/interactive-charts.tsx

@@ -1,248 +1,20 @@
-import ReactECharts from "echarts-for-react/lib/index";
-import type { EChartsOption } from "echarts-for-react/lib/types";
-import { motion } from "motion/react";
-import { useTheme } from "next-themes";
+import dynamic from "next/dynamic";
 import { Card } from "@/components/ui/card";
 
-const CHART_COLORS = [
-  "#22c55e", // green
-  "#3b82f6", // blue
-  "#f59e0b", // amber
-  "#8b5cf6", // purple
-  "#ec4899", // pink
-  "#06b6d4", // cyan
-  "#ef4444", // red
-  "#84cc16", // lime
-];
-
-export type BaseChart = {
-  type: string;
-  title: string;
-  x_label?: string;
-  y_label?: string;
-  elements: any[];
-  x_scale?: string;
-};
-
-function InteractiveChart({ chart }: { chart: BaseChart }) {
-  const { resolvedTheme } = useTheme();
-  // TOOD: Update for multitheme support
-  // const textColor = theme === 'dark' ? '#e5e5e5' : '#171717';
-  const textColor = "#e5e5e5";
-  // const gridColor =
-  //   theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
-  const gridColor = "rgba(255, 255, 255, 0.1)";
-  // const tooltipBg = theme === 'dark' ? '#171717' : '#ffffff';
-  const tooltipBg = "#171717";
-
-  const sharedOptions: EChartsOption = {
-    backgroundColor: "transparent",
-    grid: {
-      top: 50,
-      right: 32,
-      bottom: 32,
-      left: 32,
-      containLabel: true,
-    },
-    legend: {
-      textStyle: { color: textColor },
-      top: 8,
-      icon: "circle",
-      itemWidth: 8,
-      itemHeight: 8,
-      itemGap: 16,
-    },
-    tooltip: {
-      trigger: "axis",
-      backgroundColor: tooltipBg,
-      borderWidth: 0,
-      padding: [6, 10],
-      className:
-        "echarts-tooltip rounded-lg! border! border-neutral-200! dark:border-neutral-800!",
-      textStyle: {
-        color: textColor,
-        fontSize: 13,
-        fontFamily: "system-ui, -apple-system, sans-serif",
-      },
-    },
-  };
-
-  const getChartOptions = (): EChartsOption => {
-    const defaultAxisOptions = {
-      axisLine: { show: true, lineStyle: { color: gridColor } },
-      axisTick: { show: false },
-      axisLabel: {
-        color: textColor,
-        margin: 8,
-        fontSize: 11,
-        hideOverlap: true,
-      },
-      nameTextStyle: {
-        color: textColor,
-        fontSize: 13,
-        padding: [0, 0, 0, 0],
-      },
-      splitLine: {
-        show: true,
-        lineStyle: { color: gridColor, type: "dashed" },
-      },
-    };
-
-    if (chart.type === "line" || chart.type === "scatter") {
-      const series = chart.elements.map((e, index) => ({
-        name: e.label,
-        type: chart.type,
-        data: e.points.map((p: [number | string, number]) => {
-          // Handle datetime x-axis
-          const x =
-            chart.x_scale === "datetime" ? new Date(p[0]).getTime() : p[0];
-          return [x, p[1]];
-        }),
-        smooth: true,
-        symbolSize: chart.type === "scatter" ? 10 : 0,
-        lineStyle: {
-          width: 2,
-          color: CHART_COLORS[index % CHART_COLORS.length],
-        },
-        itemStyle: {
-          color: CHART_COLORS[index % CHART_COLORS.length],
-        },
-        areaStyle:
-          chart.type === "line"
-            ? {
-                color: {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: `${CHART_COLORS[index % CHART_COLORS.length]}15`, // 15 = 10% opacity
-                    },
-                    {
-                      offset: 1,
-                      color: "rgba(23, 23, 23, 0)",
-                      // theme === 'dark'
-                      //   ? 'rgba(23, 23, 23, 0)'
-                      //   : 'rgba(255, 255, 255, 0)',
-                    },
-                  ],
-                },
-              }
-            : undefined,
-      }));
-
-      return {
-        ...sharedOptions,
-        xAxis: {
-          type: chart.x_scale === "datetime" ? "time" : "value",
-          name: chart.x_label,
-          nameLocation: "middle",
-          nameGap: 40,
-          scale: true,
-          ...defaultAxisOptions,
-          axisLabel: {
-            ...defaultAxisOptions.axisLabel,
-            formatter:
-              chart.x_scale === "datetime"
-                ? (value: number) => {
-                    const date = new Date(value);
-                    return date.toLocaleDateString("en-US", {
-                      month: "short",
-                      year: "numeric",
-                    });
-                  }
-                : undefined,
-          },
-        },
-        yAxis: {
-          type: "value",
-          name: chart.y_label,
-          nameLocation: "middle",
-          nameGap: 50,
-          position: "right",
-          scale: true,
-          ...defaultAxisOptions,
-        },
-        series,
-      };
-    }
-
-    if (chart.type === "bar") {
-      const data = chart.elements.reduce((acc: Record<string, any[]>, item) => {
-        const key = item.group;
-        if (!acc[key]) {
-          acc[key] = [];
-        }
-        acc[key].push(item);
-        return acc;
-      }, {});
-
-      const series = Object.entries(data).map(([group, elements], index) => ({
-        name: group,
-        type: "bar",
-        stack: "total",
-        data: elements?.map((e) => [e.label, e.value]),
-        itemStyle: {
-          color: CHART_COLORS[index % CHART_COLORS.length],
-        },
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowColor: "rgba(0,0,0,0.3)",
-          },
-        },
-      }));
-
-      return {
-        ...sharedOptions,
-        xAxis: {
-          type: "category",
-          name: chart.x_label,
-          nameLocation: "middle",
-          nameGap: 40,
-          ...defaultAxisOptions,
-        },
-        yAxis: {
-          type: "value",
-          name: chart.y_label,
-          nameLocation: "middle",
-          nameGap: 50,
-          position: "right",
-          ...defaultAxisOptions,
-        },
-        series,
-      };
-    }
-
-    return sharedOptions;
-  };
-
-  return (
-    <motion.div
-      animate={{ opacity: 1, y: 0 }}
-      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">
-        <div className="p-6">
-          {chart.title && (
-            <h3 className="mb-4 font-medium text-lg text-neutral-900 dark:text-neutral-100">
-              {chart.title}
-            </h3>
-          )}
-          <ReactECharts
-            notMerge={true}
-            option={getChartOptions()}
-            style={{ height: "400px", width: "100%" }}
-            theme={resolvedTheme === "dark" ? "dark" : undefined}
-          />
-        </div>
-      </Card>
-    </motion.div>
-  );
-}
-
-export default InteractiveChart;
+export type { BaseChart } from "./interactive-chart-impl";
+
+const ChartSkeleton = () => (
+  <Card className="overflow-hidden border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900">
+    <div className="flex h-[400px] items-center justify-center p-6">
+      <div className="size-8 animate-pulse rounded-md bg-muted" />
+    </div>
+  </Card>
+);
+
+export default dynamic(
+  () => import("./interactive-chart-impl").then((m) => m.default),
+  {
+    loading: () => <ChartSkeleton />,
+    ssr: false,
+  }
+);

package/templates/chat-app/components/lexical-chat-input.tsx

@@ -78,24 +78,24 @@ function EditorRefPlugin({
   return null;
 }
 
-type LexicalChatInputRef = {
-  focus: () => void;
+interface LexicalChatInputRef {
   clear: () => void;
+  focus: () => void;
   getValue: () => string;
-};
+}
 
-type LexicalChatInputProps = {
+interface LexicalChatInputProps {
+  autoFocus?: boolean;
+  className?: string;
+  "data-testid"?: string;
   initialValue?: string;
+  maxRows?: number;
+  onEnterSubmit?: (event: KeyboardEvent) => boolean;
   onInputChange?: (value: string) => void;
   onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
   onPaste?: (event: ClipboardEvent<HTMLDivElement>) => void;
-  onEnterSubmit?: (event: KeyboardEvent) => boolean;
   placeholder?: string;
-  autoFocus?: boolean;
-  className?: string;
-  maxRows?: number;
-  "data-testid"?: string;
-};
+}
 
 const theme = {
   root: "lexical-root",

package/templates/chat-app/components/message-editor.tsx

@@ -10,12 +10,12 @@ import {
 import { ChatInputProvider } from "@/providers/chat-input-provider";
 import { MultimodalInput } from "./multimodal-input";
 
-export type MessageEditorProps = {
+export interface MessageEditorProps {
   chatId: string;
   message: ChatMessage;
-  setMode: Dispatch<SetStateAction<"view" | "edit">>;
   parentMessageId: string | null;
-};
+  setMode: Dispatch<SetStateAction<"view" | "edit">>;
+}
 
 function MessageEditorContent({
   chatId,

package/templates/chat-app/components/message-parts.tsx

@@ -19,6 +19,7 @@ import { DeepResearch } from "./part/deep-research";
 import { DocumentTool } from "./part/document-tool";
 import { DynamicToolPart } from "./part/dynamic-tool";
 import { GenerateImage } from "./part/generate-image";
+import { GenerateVideo } from "./part/generate-video";
 import { ReasoningPart } from "./part/message-reasoning";
 import { ReadDocument } from "./part/read-document";
 
@@ -27,11 +28,11 @@ import { TextMessagePart } from "./part/text-message-part";
 import { Weather } from "./part/weather";
 import { WebSearch } from "./part/web-search";
 
-type MessagePartsProps = {
-  messageId: string;
+interface MessagePartsProps {
   isLoading: boolean;
   isReadonly: boolean;
-};
+  messageId: string;
+}
 
 function ToolPart({
   part,
@@ -77,6 +78,10 @@ function ToolPart({
     return <GenerateImage tool={part} />;
   }
 
+  if (type === "tool-generateVideo") {
+    return <GenerateVideo tool={part} />;
+  }
+
   if (type === "tool-deepResearch") {
     return <DeepResearch messageId={messageId} part={part} />;
   }

package/templates/chat-app/components/messages-pane.tsx

@@ -8,12 +8,12 @@ import { cn } from "@/lib/utils";
 import { Messages } from "./messages";
 import { MultimodalInput } from "./multimodal-input";
 
-type MessagesPaneProps = {
+interface MessagesPaneProps {
   chatId: string;
-  status: UseChatHelpers<ChatMessage>["status"];
-  isReadonly: boolean;
   className?: string;
-};
+  isReadonly: boolean;
+  status: UseChatHelpers<ChatMessage>["status"];
+}
 
 function PureMessagesPane({
   chatId,

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

@@ -12,9 +12,9 @@ import { PreviewMessage } from "./message";
 import { ResponseErrorMessage } from "./response-error-message";
 import { ThinkingMessage } from "./thinking-message";
 
-type PureMessagesInternalProps = {
+interface PureMessagesInternalProps {
   isReadonly: boolean;
-};
+}
 
 const PureMessagesInternal = memo(
   ({ isReadonly }: PureMessagesInternalProps) => {
@@ -55,11 +55,11 @@ const PureMessagesInternal = memo(
   }
 );
 
-type MessagesProps = {
+interface MessagesProps {
+  className?: string;
   isReadonly: boolean;
   onModelChange?: (modelId: string) => void;
-  className?: string;
-};
+}
 
 function PureMessages({ isReadonly, className }: MessagesProps) {
   return (

package/templates/chat-app/components/model-selector.tsx

@@ -168,7 +168,10 @@ function PureModelSelector({
   const [featureFilters, setFeatureFilters] =
     useState<FeatureFilter>(initialFilters);
 
-  type ModelItem = { model: AppModelDefinition; disabled: boolean };
+  interface ModelItem {
+    disabled: boolean;
+    model: AppModelDefinition;
+  }
 
   const models = useMemo<ModelItem[]>(
     () =>

package/templates/chat-app/components/multimodal-input.tsx

@@ -83,6 +83,7 @@ function PureMultimodalInput({
   chatId,
   status,
   className,
+  autoFocus = false,
   isEditMode = false,
   parentMessageId,
   onSendMessage,
@@ -90,6 +91,7 @@ function PureMultimodalInput({
   chatId: string;
   status: UseChatHelpers<ChatMessage>["status"];
   className?: string;
+  autoFocus?: boolean;
   isEditMode?: boolean;
   parentMessageId: string | null;
   onSendMessage?: (message: ChatMessage) => void | Promise<void>;
@@ -150,7 +152,7 @@ function PureMultimodalInput({
 
   // Helper function to auto-switch to PDF-compatible model
   const switchToPdfCompatibleModel = useCallback(() => {
-    const pdfModel = config.models.defaults.pdf;
+    const pdfModel = config.ai.workflows.pdf;
     const defaultPdfModelDef = getModelById(pdfModel);
     if (defaultPdfModelDef) {
       toast.success(`Switched to ${defaultPdfModelDef.name} (supports PDF)`);
@@ -161,7 +163,7 @@ function PureMultimodalInput({
 
   // Helper function to auto-switch to image-compatible model
   const switchToImageCompatibleModel = useCallback(() => {
-    const imageModel = config.models.defaults.chatImageCompatible;
+    const imageModel = config.ai.workflows.chatImageCompatible;
     const defaultImageModelDef = getModelById(imageModel);
     if (defaultImageModelDef) {
       toast.success(
@@ -642,7 +644,7 @@ function PureMultimodalInput({
           />
 
           <LexicalChatInput
-            autoFocus
+            autoFocus={autoFocus}
             className="max-h-[max(35svh,5rem)] min-h-[60px] overflow-y-scroll sm:min-h-[80px]"
             data-testid="multimodal-input"
             initialValue={getInitialInput()}
@@ -918,10 +920,12 @@ const ChatInputBottomControls = memo(PureChatInputBottomControls);
 export const MultimodalInput = memo(
   PureMultimodalInput,
   (prevProps, nextProps) => {
-    // More specific equality checks to prevent unnecessary re-renders
     if (prevProps.status !== nextProps.status) {
       return false;
     }
+    if (prevProps.autoFocus !== nextProps.autoFocus) {
+      return false;
+    }
     if (prevProps.isEditMode !== nextProps.isEditMode) {
       return false;
     }
@@ -931,7 +935,12 @@ export const MultimodalInput = memo(
     if (prevProps.className !== nextProps.className) {
       return false;
     }
-
+    if (prevProps.parentMessageId !== nextProps.parentMessageId) {
+      return false;
+    }
+    if (prevProps.onSendMessage !== nextProps.onSendMessage) {
+      return false;
+    }
     return true;
   }
 );

package/templates/chat-app/components/part/code-execution.tsx

@@ -19,7 +19,10 @@ function isBaseChart(input: unknown): input is BaseChart {
   return hasType && hasTitle && hasElements;
 }
 
-type PngChart = { base64: string; format: string };
+interface PngChart {
+  base64: string;
+  format: string;
+}
 
 function isPngChart(input: unknown): input is PngChart {
   if (typeof input !== "object" || input === null) {

package/templates/chat-app/components/part/document-common.tsx

@@ -48,16 +48,16 @@ const getActionText = (
   }
 };
 
-type DocumentToolResultProps = {
-  type: "create" | "update";
+interface DocumentToolResultProps {
+  isReadonly: boolean;
+  messageId: string;
   result: {
     id: string;
     title: string;
     kind: ArtifactKind;
   };
-  isReadonly: boolean;
-  messageId: string;
-};
+  type: "create" | "update";
+}
 
 function PureDocumentToolResult({
   type,
@@ -103,11 +103,11 @@ function PureDocumentToolResult({
 
 export const DocumentToolResult = memo(PureDocumentToolResult, () => true);
 
-type DocumentToolCallProps = {
-  type: "create" | "update";
+interface DocumentToolCallProps {
   args: { title?: string };
   isReadonly: boolean;
-};
+  type: "create" | "update";
+}
 
 function PureDocumentToolCall({
   type,

package/templates/chat-app/components/part/document-preview.tsx

@@ -2,6 +2,7 @@
 
 import equal from "fast-deep-equal";
 import { File, Loader2, Maximize, Pencil } from "lucide-react";
+import dynamic from "next/dynamic";
 import { type MouseEvent, memo, useCallback, useMemo, useRef } from "react";
 import { useDocuments } from "@/hooks/chat-sync-hooks";
 import { useArtifact } from "@/hooks/use-artifact";
@@ -9,33 +10,50 @@ import type { ArtifactKind } from "@/lib/artifacts/artifact-kind";
 import type { Document } from "@/lib/db/schema";
 import { cn } from "@/lib/utils";
 import type { UIArtifact } from "../artifact-panel";
-import { CodeEditor } from "../code-editor";
 import { InlineDocumentSkeleton } from "../document-skeleton";
-import { ImageEditor } from "../image-editor";
-import { SpreadsheetEditor } from "../sheet-editor";
-import { Editor } from "../text-editor";
 import { DocumentToolCall, DocumentToolResult } from "./document-common";
 
-type DocumentPreviewInput = {
-  title: string;
-  kind: ArtifactKind;
+const CodeEditor = dynamic(
+  () => import("../code-editor").then((m) => ({ default: m.CodeEditor })),
+  { loading: () => <InlineDocumentSkeleton />, ssr: false }
+);
+
+const Editor = dynamic(
+  () => import("../text-editor").then((m) => ({ default: m.Editor })),
+  { loading: () => <InlineDocumentSkeleton />, ssr: false }
+);
+
+const ImageEditor = dynamic(
+  () => import("../image-editor").then((m) => ({ default: m.ImageEditor })),
+  { loading: () => <InlineDocumentSkeleton />, ssr: false }
+);
+
+const SpreadsheetEditor = dynamic(
+  () =>
+    import("../sheet-editor").then((m) => ({ default: m.SpreadsheetEditor })),
+  { loading: () => <InlineDocumentSkeleton />, ssr: false }
+);
+
+interface DocumentPreviewInput {
   content: string;
-};
+  kind: ArtifactKind;
+  title: string;
+}
 
-type DocumentPreviewOutput = {
+interface DocumentPreviewOutput {
   documentId: string;
-  title: string;
   kind: ArtifactKind;
-};
+  title: string;
+}
 
-type DocumentPreviewProps = {
-  isReadonly: boolean;
-  output?: DocumentPreviewOutput;
+interface DocumentPreviewProps {
   input?: DocumentPreviewInput;
+  isLastArtifact?: boolean;
+  isReadonly: boolean;
   messageId: string;
+  output?: DocumentPreviewOutput;
   type?: "create" | "update";
-  isLastArtifact?: boolean;
-};
+}
 
 export function DocumentPreview({
   isReadonly,

package/templates/chat-app/components/part/document-tool.tsx

@@ -16,11 +16,11 @@ type DocumentTool = Extract<
   { type: DocumentToolType }
 >;
 
-type DocumentToolComponentProps = {
-  tool: DocumentTool;
+interface DocumentToolComponentProps {
   isReadonly: boolean;
   messageId: string;
-};
+  tool: DocumentTool;
+}
 
 function PureDocumentTool({
   tool,

package/templates/chat-app/components/part/dynamic-tool.tsx

@@ -16,11 +16,11 @@ import { parseToolId } from "@/lib/ai/mcp-name-id";
 import { useTRPC } from "@/trpc/react";
 import { getGoogleFaviconUrl } from "../get-google-favicon-url";
 
-type DynamicToolPartProps = {
-  messageId: string;
+interface DynamicToolPartProps {
   isReadonly: boolean;
+  messageId: string;
   part: DynamicToolUIPart;
-};
+}
 
 export function DynamicToolPart({ part }: DynamicToolPartProps) {
   const trpc = useTRPC();