@amaster.ai/components-templates 1.3.0

package/components/ai-assistant/template/components/ui-renderer-lazy.tsx

@@ -0,0 +1,307 @@
+import type { ReactNode } from "react";
+import {
+  Renderer,
+  StateProvider,
+  VisibilityProvider,
+  ValidationProvider,
+  ActionProvider,
+  defineRegistry
+} from "@json-render/react";
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/react/schema";
+import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
+import { shadcnComponents } from "@json-render/shadcn";
+import { z } from "zod";
+import {
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip as RechartsTooltip,
+  Legend,
+  ResponsiveContainer,
+  AreaChart,
+  Area,
+} from "recharts";
+import { cn } from "@/lib/utils";
+
+const CHART_COLORS = [
+  "#6366F1",
+  "#8B5CF6",
+  "#EC4899",
+  "#10B981",
+  "#F59E0B",
+  "#3B82F6",
+];
+
+const catalog = defineCatalog(schema, {
+  components: {
+    Card: shadcnComponentDefinitions.Card,
+    Stack: shadcnComponentDefinitions.Stack,
+    Grid: shadcnComponentDefinitions.Grid,
+    Heading: shadcnComponentDefinitions.Heading,
+    Text: shadcnComponentDefinitions.Text,
+    Button: shadcnComponentDefinitions.Button,
+    Badge: shadcnComponentDefinitions.Badge,
+    Alert: shadcnComponentDefinitions.Alert,
+    Progress: shadcnComponentDefinitions.Progress,
+    Table: shadcnComponentDefinitions.Table,
+    Input: shadcnComponentDefinitions.Input,
+    Textarea: shadcnComponentDefinitions.Textarea,
+    Select: shadcnComponentDefinitions.Select,
+    Checkbox: shadcnComponentDefinitions.Checkbox,
+    Radio: shadcnComponentDefinitions.Radio,
+    Switch: shadcnComponentDefinitions.Switch,
+    Slider: shadcnComponentDefinitions.Slider,
+    Tabs: shadcnComponentDefinitions.Tabs,
+    Accordion: shadcnComponentDefinitions.Accordion,
+    Collapsible: shadcnComponentDefinitions.Collapsible,
+    Dialog: shadcnComponentDefinitions.Dialog,
+    Drawer: shadcnComponentDefinitions.Drawer,
+    Tooltip: shadcnComponentDefinitions.Tooltip,
+    Popover: shadcnComponentDefinitions.Popover,
+    DropdownMenu: shadcnComponentDefinitions.DropdownMenu,
+    Separator: shadcnComponentDefinitions.Separator,
+    Avatar: shadcnComponentDefinitions.Avatar,
+    Image: shadcnComponentDefinitions.Image,
+    Link: shadcnComponentDefinitions.Link,
+    Skeleton: shadcnComponentDefinitions.Skeleton,
+    Spinner: shadcnComponentDefinitions.Spinner,
+    Carousel: shadcnComponentDefinitions.Carousel,
+    Pagination: shadcnComponentDefinitions.Pagination,
+    Toggle: shadcnComponentDefinitions.Toggle,
+    ToggleGroup: shadcnComponentDefinitions.ToggleGroup,
+    ButtonGroup: shadcnComponentDefinitions.ButtonGroup,
+    BarChart: {
+      props: z.object({
+        data: z.array(z.record(z.any())),
+        xKey: z.string(),
+        yKey: z.string(),
+        height: z.number().optional(),
+      }),
+    },
+    LineChart: {
+      props: z.object({
+        data: z.array(z.record(z.any())),
+        xKey: z.string(),
+        yKey: z.string(),
+        height: z.number().optional(),
+      }),
+    },
+    PieChart: {
+      props: z.object({
+        data: z.array(z.record(z.any())),
+        nameKey: z.string(),
+        valueKey: z.string(),
+        height: z.number().optional(),
+      }),
+    },
+    AreaChart: {
+      props: z.object({
+        data: z.array(z.record(z.any())),
+        xKey: z.string(),
+        yKey: z.string(),
+        height: z.number().optional(),
+      }),
+    },
+  },
+  actions: {},
+});
+
+const { registry, handlers } = defineRegistry(catalog, {
+  components: {
+    Card: shadcnComponents.Card,
+    Stack: shadcnComponents.Stack,
+    Grid: shadcnComponents.Grid,
+    Heading: shadcnComponents.Heading,
+    Text: shadcnComponents.Text,
+    Button: shadcnComponents.Button,
+    Badge: shadcnComponents.Badge,
+    Alert: shadcnComponents.Alert,
+    Progress: shadcnComponents.Progress,
+    Table: shadcnComponents.Table,
+    Input: shadcnComponents.Input,
+    Textarea: shadcnComponents.Textarea,
+    Select: shadcnComponents.Select,
+    Checkbox: shadcnComponents.Checkbox,
+    Radio: shadcnComponents.Radio,
+    Switch: shadcnComponents.Switch,
+    Slider: shadcnComponents.Slider,
+    Tabs: shadcnComponents.Tabs,
+    Accordion: shadcnComponents.Accordion,
+    Collapsible: shadcnComponents.Collapsible,
+    Dialog: shadcnComponents.Dialog,
+    Drawer: shadcnComponents.Drawer,
+    Tooltip: shadcnComponents.Tooltip,
+    Popover: shadcnComponents.Popover,
+    DropdownMenu: shadcnComponents.DropdownMenu,
+    Separator: shadcnComponents.Separator,
+    Avatar: shadcnComponents.Avatar,
+    Image: shadcnComponents.Image,
+    Link: shadcnComponents.Link,
+    Skeleton: shadcnComponents.Skeleton,
+    Spinner: shadcnComponents.Spinner,
+    Carousel: shadcnComponents.Carousel,
+    Pagination: shadcnComponents.Pagination,
+    Toggle: shadcnComponents.Toggle,
+    ToggleGroup: shadcnComponents.ToggleGroup,
+    ButtonGroup: shadcnComponents.ButtonGroup,
+    BarChart: ({ props }) => {
+      const { data, xKey, yKey, height = 300 } = props;
+      return (
+        <div style={{ width: "100%", height }}>
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={data}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey={xKey} />
+              <YAxis />
+              <RechartsTooltip />
+              <Bar dataKey={yKey} fill={CHART_COLORS[0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      );
+    },
+    LineChart: ({ props }) => {
+      const { data, xKey, yKey, height = 300 } = props;
+      return (
+        <div style={{ width: "100%", height }}>
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart data={data}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey={xKey} />
+              <YAxis />
+              <RechartsTooltip />
+              <Legend />
+              <Line
+                type="monotone"
+                dataKey={yKey}
+                stroke={CHART_COLORS[0]}
+                strokeWidth={2}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      );
+    },
+    PieChart: ({ props }) => {
+      const { data, nameKey, valueKey, height = 300 } = props;
+      return (
+        <div style={{ width: "100%", height }}>
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={data}
+                cx="50%"
+                cy="50%"
+                labelLine={false}
+                label={({ name, percent }) =>
+                  `${name} ${(percent * 100).toFixed(0)}%`
+                }
+                outerRadius={80}
+                fill="#8884d8"
+                dataKey={valueKey}
+                nameKey={nameKey}
+              >
+                {data.map((entry: any, index: number) => (
+                  <Cell
+                    key={`cell-${index}`}
+                    fill={CHART_COLORS[index % CHART_COLORS.length]}
+                  />
+                ))}
+              </Pie>
+              <RechartsTooltip />
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
+      );
+    },
+    AreaChart: ({ props }) => {
+      const { data, xKey, yKey, height = 300 } = props;
+      return (
+        <div style={{ width: "100%", height }}>
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={data}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey={xKey} />
+              <YAxis />
+              <RechartsTooltip />
+              <Area
+                type="monotone"
+                dataKey={yKey}
+                stroke={CHART_COLORS[0]}
+                fill={CHART_COLORS[0]}
+                fillOpacity={0.3}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      );
+    },
+  },
+  actions: {},
+});
+
+interface UIRendererLazyProps {
+  className?: string;
+  spec: {
+    root: string;
+    elements: Record<
+      string,
+      {
+        type: string;
+        props?: Record<string, unknown>;
+        children?: string[];
+      }
+    >;
+  };
+}
+
+const UIRendererLazy: React.FC<UIRendererLazyProps> = ({
+  spec,
+  className,
+}): ReactNode => {
+  return (
+    <StateProvider>
+      <VisibilityProvider>
+        <ValidationProvider>
+          <ActionProvider
+            handlers={{
+              submitLogin: async (params) => {
+                console.log("Login submitted with params:", params);
+              },
+              confirmDelete: async (params: any) => {
+                const confirmed = window.confirm(
+                  `Are you sure you want to delete item with ID: ${params?.id}?`,
+                );
+                if (confirmed) {
+                  console.log(`Item with ID: ${params?.id} has been deleted.`);
+                } else {
+                  console.log("Delete action cancelled.");
+                }
+              },
+              deleteCancel: async (params: any) => {
+                console.log("Delete action cancelled.");
+              },
+              viewDetails: async (params: any) => {
+                console.log(`Viewing details for item with ID: ${params?.id}`);
+              },
+            }}
+          >
+            <div className={cn("max-w-full w-full", className)}>
+              <Renderer spec={spec as any} registry={registry} />
+            </div>
+          </ActionProvider>
+        </ValidationProvider>
+      </VisibilityProvider>
+    </StateProvider>
+  );
+};
+
+export default UIRendererLazy;

package/components/ai-assistant/template/components/ui-renderer.tsx

@@ -0,0 +1,34 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { lazy, Suspense } from "react";
+
+const UIRendererLazy = lazy(() => import("./ui-renderer-lazy"));
+
+interface UIRendererProps {
+  className?: string;
+  spec: {
+    root: string;
+    elements: Record<
+      string,
+      {
+        type: string;
+        props?: Record<string, unknown>;
+        children?: string[];
+      }
+    >;
+  };
+}
+
+export const UIRenderer: React.FC<UIRendererProps> = ({ spec, className }) => {
+  if (!spec || !spec.root || !spec.elements) {
+    return <div>Invalid spec</div>;
+  }
+
+  return (
+    <Suspense fallback={<Skeleton className={cn('w-full h-[120px] bg-gray-200', className)} />}>
+      <UIRendererLazy spec={spec} className={className} />
+    </Suspense>
+  );
+};
+
+export default UIRenderer;

package/components/ai-assistant/template/components/voice-input.tsx

@@ -0,0 +1,43 @@
+import type React from "react";
+import { Mic, StopCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useVoiceInput } from "../hooks/useVoiceInput";
+
+const VoiceInputButton: React.FC<{
+  onChange: (text: string) => void;
+  disabled?: boolean;
+  value?: string;
+}> = ({ onChange, disabled, value }) => {
+  const {
+    start,
+    stop,
+    running,
+    stoppable,
+    statusText,
+    status,
+    disabled: finalDisabled,
+  } = useVoiceInput({
+    onChange,
+    disabled,
+    value,
+  });
+
+  return (
+    <Button
+      variant="ghost"
+      onClick={stoppable ? stop : status === "idle" ? start : undefined}
+      disabled={finalDisabled}
+      className={cn("h-8 w-8 rounded-lg cursor-pointer text-xs ", {
+        "bg-gradient-to-r from-blue-500 to-blue-800 hover:from-blue-400 hover:to-blue-600 text-white animate-pulse":
+          running,
+        "w-auto": statusText,
+      })}
+    >
+      {running ? <StopCircle /> : <Mic />}
+      {statusText}
+    </Button>
+  );
+};
+
+export default VoiceInputButton;

package/components/ai-assistant/template/hooks/useAssistantStore.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { useConversationProcessor } from "./useConversationProcessor";
+import { useAutoScroll } from "./useAutoScroll";
+
+export const useAssistantStore = () => {
+  const [inputValue, setInputValue] = useState("");
+
+  const chatStreamHook = useConversationProcessor();
+  const { conversations, isLoading, sendMessage, resetConversation } =
+    chatStreamHook;
+
+  const autoScrollHook = useAutoScroll(conversations, isLoading);
+  const { scrollAreaRef, messagesEndRef, scrollToBottom } = autoScrollHook;
+
+  const handleSendMessage = async (value?: string) => {
+    const message = value !== undefined ? value : inputValue;
+    if (!message.trim() || isLoading) {
+      return;
+    }
+    setInputValue("");
+    scrollToBottom(true);
+    await sendMessage(message.trim());
+  };
+
+  return {
+    conversations,
+    isLoading,
+    inputValue,
+    setInputValue,
+    sendMessage: handleSendMessage,
+    reset: resetConversation,
+    scrollAreaRef,
+    messagesEndRef,
+    scrollToBottom
+  };
+};

package/components/ai-assistant/template/hooks/useAutoScroll.ts

@@ -0,0 +1,90 @@
+import { useEffect, useRef } from "react";
+import type { Conversation } from "../types";
+
+export const useAutoScroll = (
+  conversations: Conversation[],
+  isLoading: boolean,
+) => {
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const userScrolledRef = useRef(false);
+  const lastScrollTopRef = useRef(0);
+
+  const scrollToBottom = (force = false) => {
+    if (userScrolledRef.current && !force) return;
+    if (force) {
+      userScrolledRef.current = false;
+    }
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "end",
+      });
+    }
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+    const timer = setTimeout(scrollToBottom, 100);
+
+    return () => clearTimeout(timer);
+  }, [conversations]);
+
+  useEffect(() => {
+    if (!isLoading) {
+      const timer = setTimeout(() => {
+        userScrolledRef.current = false;
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [isLoading]);
+
+  useEffect(() => {
+    const scrollArea = scrollAreaRef.current;
+    if (!scrollArea) return;
+
+    const viewport = scrollArea.querySelector(
+      "[data-radix-scroll-area-viewport]",
+    ) as HTMLElement | null;
+    const scrollElement = viewport || scrollArea;
+
+    const handleScroll = () => {
+      const currentScrollTop = scrollElement.scrollTop;
+      const scrollHeight = scrollElement.scrollHeight;
+      const clientHeight = scrollElement.clientHeight;
+
+      const isAtBottom = scrollHeight - currentScrollTop - clientHeight < 50;
+
+      if (!isAtBottom && currentScrollTop < lastScrollTopRef.current) {
+        userScrolledRef.current = true;
+      }
+
+      if (isAtBottom) {
+        userScrolledRef.current = false;
+      }
+
+      lastScrollTopRef.current = currentScrollTop;
+    };
+
+    const handleWheel = () => {
+      if (isLoading) {
+        userScrolledRef.current = true;
+      }
+    };
+
+    scrollElement.addEventListener("scroll", handleScroll, { passive: true });
+    scrollElement.addEventListener("wheel", handleWheel, { passive: true });
+
+    return () => {
+      scrollElement.removeEventListener("scroll", handleScroll);
+      scrollElement.removeEventListener("wheel", handleWheel);
+    };
+  }, [isLoading]);
+
+  return {
+    scrollAreaRef,
+    messagesEndRef,
+    scrollToBottom
+  };
+};