@chat-js/cli 0.1.3 → 0.2.0

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

@@ -62,8 +62,7 @@ export function ChatSync({
     resume: isLastMessagePartial,
     transport: new DefaultChatTransport({
       api: "/api/chat",
-      // @ts-expect-error CI has a stricter global fetch type (includes preconnect).
-      fetch: fetchWithErrorHandlers,
+      fetch: fetchWithErrorHandlers as typeof fetch,
       prepareSendMessagesRequest({ messages, id: requestId, body }) {
         setAutoResume(true);
 

package/templates/chat-app/components/clone-chat-button.tsx

@@ -6,10 +6,10 @@ import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { useCloneChat } from "@/hooks/chat-sync-hooks";
 
-type CloneChatButtonProps = {
+interface CloneChatButtonProps {
   chatId: string;
   className?: string;
-};
+}
 
 export function CloneChatButton({ chatId, className }: CloneChatButtonProps) {
   const router = useRouter();

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

@@ -8,15 +8,15 @@ import { EditorView } from "@codemirror/view";
 import { basicSetup } from "codemirror";
 import { memo, useEffect, useRef } from "react";
 
-type EditorProps = {
+interface EditorProps {
   content: string;
-  onSaveContent: (updatedContent: string, debounce: boolean) => void;
-  status: "streaming" | "idle";
-  isCurrentVersion: boolean;
   currentVersionIndex: number;
+  isCurrentVersion: boolean;
   isReadonly?: boolean;
   language?: string;
-};
+  onSaveContent: (updatedContent: string, debounce: boolean) => void;
+  status: "streaming" | "idle";
+}
 
 function getLanguageExtension(language: string) {
   switch (language) {

package/templates/chat-app/components/connectors-dropdown.tsx

@@ -30,7 +30,7 @@ function PureConnectorsDropdown() {
 
   const { data: connectors } = useQuery({
     ...trpc.mcp.listConnected.queryOptions(),
-    enabled: config.features.mcp && isAuthenticated,
+    enabled: config.ai.tools.mcp.enabled && isAuthenticated,
   });
 
   const queryKey = trpc.mcp.listConnected.queryKey();
@@ -59,7 +59,7 @@ function PureConnectorsDropdown() {
       },
     })
   );
-  if (!config.features.mcp) {
+  if (!config.ai.tools.mcp.enabled) {
     return null;
   }
   if (!connectors || connectors.length === 0) {

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

@@ -4,16 +4,16 @@ import { useArtifactSelector } from "@/hooks/use-artifact";
 import { cn } from "@/lib/utils";
 import { Button } from "./ui/button";
 
-export type ConsoleOutputContent = {
+export interface ConsoleOutputContent {
   type: "text" | "image";
   value: string;
-};
+}
 
-export type ConsoleOutput = {
+export interface ConsoleOutput {
+  contents: ConsoleOutputContent[];
   id: string;
   status: "in_progress" | "loading_packages" | "completed" | "failed";
-  contents: ConsoleOutputContent[];
-};
+}
 
 function getConsoleStatusText(consoleOutput: ConsoleOutput): string | null {
   if (consoleOutput.status === "in_progress") {

package/templates/chat-app/components/create-artifact.tsx

@@ -7,59 +7,57 @@ import type { ChatMessage, CustomUIDataTypes } from "@/lib/ai/types";
 import type { useTRPC } from "@/trpc/react";
 import type { UIArtifact } from "./artifact-panel";
 
-export type ArtifactActionContext<M = any> = {
+export interface ArtifactActionContext<M = any> {
   content: string;
-  handleVersionChange: (type: "next" | "prev" | "toggle" | "latest") => void;
   currentVersionIndex: number;
+  handleVersionChange: (type: "next" | "prev" | "toggle" | "latest") => void;
   isCurrentVersion: boolean;
-  mode: "edit" | "diff";
+  isReadonly?: boolean;
   metadata: M;
+  mode: "edit" | "diff";
   setMetadata: Dispatch<SetStateAction<M>>;
-  isReadonly?: boolean;
-};
+}
 
-type ArtifactAction<M = any> = {
+interface ArtifactAction<M = any> {
+  description: string;
   icon: ReactNode;
+  isDisabled?: (context: ArtifactActionContext<M>) => boolean;
   label?: string;
-  description: string;
   onClick: (context: ArtifactActionContext<M>) => Promise<void> | void;
-  isDisabled?: (context: ArtifactActionContext<M>) => boolean;
-};
+}
 
-export type ArtifactToolbarContext = {
+export interface ArtifactToolbarContext {
   sendMessage: UseChatHelpers<ChatMessage>["sendMessage"];
   storeApi: ReturnType<typeof useChatStoreApi<ChatMessage>>;
-};
+}
 
-export type ArtifactToolbarItem = {
+export interface ArtifactToolbarItem {
   description: string;
   icon: ReactNode;
   onClick: (context: ArtifactToolbarContext) => void;
-};
+}
 
-type ArtifactContent<M = any> = {
-  title: string;
+interface ArtifactContent<M = any> {
   content: string;
-  mode: "edit" | "diff";
-  isCurrentVersion: boolean;
   currentVersionIndex: number;
-  status: "streaming" | "idle";
-  onSaveContent: (updatedContent: string, debounce: boolean) => void;
-  isInline: boolean;
   getDocumentContentById: (index: number) => string;
+  isCurrentVersion: boolean;
+  isInline: boolean;
   isLoading: boolean;
+  isReadonly?: boolean;
   metadata: M;
+  mode: "edit" | "diff";
+  onSaveContent: (updatedContent: string, debounce: boolean) => void;
   setMetadata: Dispatch<SetStateAction<M>>;
-  isReadonly?: boolean;
-};
+  status: "streaming" | "idle";
+  title: string;
+}
 
-type ArtifactConfig<T extends string, M = any> = {
-  kind: T;
-  description: string;
+interface ArtifactConfig<T extends string, M = any> {
+  actions: ArtifactAction<M>[];
   content: ComponentType<ArtifactContent<M>>;
+  description: string;
   footer?: ComponentType<ArtifactContent<M>>;
-  actions: ArtifactAction<M>[];
-  toolbar: ArtifactToolbarItem[];
   initialize?: ({
     documentId,
     setMetadata,
@@ -73,12 +71,14 @@ type ArtifactConfig<T extends string, M = any> = {
     queryClient: QueryClient;
     isAuthenticated: boolean;
   }) => void;
+  kind: T;
   onStreamPart?: (args: {
     setMetadata: Dispatch<SetStateAction<M>>;
     setArtifact: Dispatch<SetStateAction<UIArtifact>>;
     streamPart: DataUIPart<CustomUIDataTypes>;
   }) => void;
-};
+  toolbar: ArtifactToolbarItem[];
+}
 
 export class Artifact<T extends string, M = any> {
   readonly kind: T;

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

@@ -5,12 +5,12 @@ import type React from "react";
 import { createContext, useContext, useMemo, useState } from "react";
 import type { CustomUIDataTypes } from "@/lib/ai/types";
 
-type DataStreamContextValue = {
+interface DataStreamContextValue {
   dataStream: DataUIPart<CustomUIDataTypes>[];
   setDataStream: React.Dispatch<
     React.SetStateAction<DataUIPart<CustomUIDataTypes>[]>
   >;
-};
+}
 
 const DataStreamContext = createContext<DataStreamContextValue | null>(null);
 

package/templates/chat-app/components/deep-research-progress.tsx

@@ -2,9 +2,9 @@ import { useMemo } from "react";
 import type { ResearchUpdate } from "@/lib/ai/tools/research-updates-schema";
 import { ResearchProgress } from "./research-progress";
 
-type ReasonSearchResearchProgressProps = {
+interface ReasonSearchResearchProgressProps {
   updates: ResearchUpdate[];
-};
+}
 
 export const ReasonSearchResearchProgress = ({
   updates,

package/templates/chat-app/components/delete-chat-dialog.tsx

@@ -16,11 +16,11 @@ import {
 import { useDeleteChat } from "@/hooks/chat-sync-hooks";
 import { useChatId } from "@/providers/chat-id-provider";
 
-type DeleteChatDialogProps = {
+interface DeleteChatDialogProps {
   deleteId: string | null;
-  showDeleteDialog: boolean;
   setShowDeleteDialog: (show: boolean) => void;
-};
+  showDeleteDialog: boolean;
+}
 
 export function DeleteChatDialog({
   deleteId,

package/templates/chat-app/components/delete-project-dialog.tsx

@@ -17,11 +17,11 @@ import {
 } from "@/components/ui/alert-dialog";
 import { useTRPC } from "@/trpc/react";
 
-type DeleteProjectDialogProps = {
+interface DeleteProjectDialogProps {
   deleteId: string | null;
-  showDeleteDialog: boolean;
   setShowDeleteDialog: (show: boolean) => void;
-};
+  showDeleteDialog: boolean;
+}
 
 export function DeleteProjectDialog({
   deleteId,

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

@@ -167,10 +167,10 @@ function DiffContentPlugin({
   return null;
 }
 
-type DiffEditorProps = {
-  oldContent: string;
+interface DiffEditorProps {
   newContent: string;
-};
+  oldContent: string;
+}
 
 export const DiffView = ({ oldContent, newContent }: DiffEditorProps) => {
   const initialConfig = {

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

@@ -3,16 +3,16 @@ import { cn } from "@/lib/utils";
 import { Favicon } from "./favicon";
 
 // Define a simpler interface for the sources needed by this component
-type FaviconSource = {
-  url: string;
+interface FaviconSource {
   title?: string; // Title is optional, mainly for alt text
-};
+  url: string;
+}
 
-type FaviconGroupProps = {
-  sources: FaviconSource[]; // Use the simpler interface
-  maxVisible?: number;
+interface FaviconGroupProps {
   className?: string;
-};
+  maxVisible?: number;
+  sources: FaviconSource[]; // Use the simpler interface
+}
 
 export const FaviconGroup: React.FC<FaviconGroupProps> = ({
   sources,

package/templates/chat-app/components/header-breadcrumb.tsx

@@ -32,14 +32,14 @@ import { cn } from "@/lib/utils";
 import { useChatId } from "@/providers/chat-id-provider";
 import { ShareDialog } from "./share-button";
 
-type HeaderBreadcrumbProps = {
+interface HeaderBreadcrumbProps {
   chatId: string;
+  className?: string;
+  hasMessages?: boolean;
+  isReadonly: boolean;
   projectId?: string;
   user?: Session["user"];
-  isReadonly: boolean;
-  hasMessages?: boolean;
-  className?: string;
-};
+}
 
 export function HeaderBreadcrumb({
   chatId: _chatId,
@@ -181,7 +181,7 @@ export function HeaderBreadcrumb({
   );
 }
 
-type ChatBreadcrumbProps = {
+interface ChatBreadcrumbProps {
   canManageChat: boolean;
   chatLabel: string;
   chatTitleDraft: string;
@@ -195,7 +195,7 @@ type ChatBreadcrumbProps = {
   openChatDeleteDialog: () => void;
   showShare?: boolean;
   startChatRename: () => void;
-};
+}
 
 const PureChatBreadcrumb = memo(function InnerChatBreadcrumb({
   canManageChat,
@@ -258,14 +258,14 @@ const PureChatBreadcrumb = memo(function InnerChatBreadcrumb({
   return <BreadcrumbPage>{chatLabel}</BreadcrumbPage>;
 });
 
-type PerformChatRenameArgs = {
+interface PerformChatRenameArgs {
   chatId: string;
   chatTitleDraft: string;
   privateChat: { title?: string; isPinned?: boolean } | null | undefined;
   renameChat: (args: { chatId: string; title: string }) => Promise<unknown>;
   setChatTitleDraft: (value: string) => void;
   setIsChatEditing: (value: boolean) => void;
-};
+}
 
 async function performChatRename({
   chatId,
@@ -295,10 +295,10 @@ async function performChatRename({
   }
 }
 
-type InputKeyHandlerOptions = {
+interface InputKeyHandlerOptions {
   onEnter: () => void;
   onEscape: () => void;
-};
+}
 
 function createInputKeyDownHandler({
   onEnter,

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

@@ -1,14 +1,14 @@
 import { Loader2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 
-type ImageEditorProps = {
-  title: string;
+interface ImageEditorProps {
   content: string;
-  isCurrentVersion: boolean;
   currentVersionIndex: number;
-  status: string;
+  isCurrentVersion: boolean;
   isInline: boolean;
-};
+  status: string;
+  title: string;
+}
 
 export function ImageEditor({
   title,

package/templates/chat-app/components/image-modal.tsx

@@ -12,13 +12,13 @@ import {
 } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
 
-type ImageModalProps = {
+interface ImageModalProps {
+  imageName?: string;
+  imageUrl: string;
   isOpen: boolean;
   onClose: () => void;
-  imageUrl: string;
-  imageName?: string;
   showActions?: boolean;
-};
+}
 
 async function handleCopyImage(
   e: React.MouseEvent,

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

@@ -0,0 +1,269 @@
+"use client";
+
+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 { Card } from "@/components/ui/card";
+
+const CHART_COLORS = [
+  "#22c55e",
+  "#3b82f6",
+  "#f59e0b",
+  "#8b5cf6",
+  "#ec4899",
+  "#06b6d4",
+  "#ef4444",
+  "#84cc16",
+];
+
+interface LineScatterElement {
+  label: string;
+  points: [number | string, number][];
+}
+
+interface BarElement {
+  group: string;
+  label: string;
+  value: number;
+}
+
+interface BaseChartCommon {
+  title: string;
+  x_label?: string;
+  y_label?: string;
+}
+
+export type LineChart = BaseChartCommon & {
+  type: "line";
+  x_scale?: "datetime";
+  elements: LineScatterElement[];
+};
+
+export type ScatterChart = BaseChartCommon & {
+  type: "scatter";
+  x_scale?: "datetime";
+  elements: LineScatterElement[];
+};
+
+export type BarChart = BaseChartCommon & {
+  type: "bar";
+  x_scale?: undefined;
+  elements: BarElement[];
+};
+
+export type BaseChart = LineChart | ScatterChart | BarChart;
+
+function InteractiveChart({ chart }: { chart: BaseChart }) {
+  const { resolvedTheme } = useTheme();
+  const textColor = "#e5e5e5";
+  const gridColor = "rgba(255, 255, 255, 0.1)";
+  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]) => {
+          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`,
+                    },
+                    { offset: 1, color: "rgba(23, 23, 23, 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, BarElement[]>, 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;