feat(react-sdk): component adjustments

Author: arnautov-anton

packages/react-sdk/src/components/ai-markdown.tsx

@@ -184,6 +184,7 @@ export const AIMarkdown: AIMarkdown = (props) => {
   const mergedToolComponents: ToolComponents = useMemo(
     () => ({
       chartjs: SuspendedChart,
+      json: SuspendedChart,
       ...props.toolComponents,
     }),
     [props.toolComponents],

packages/react-sdk/src/components/composer/ai-message-composer.tsx

@@ -12,7 +12,10 @@ import { StateStore } from '@stream-io/state-store';
 import { useStateStore } from '@stream-io/state-store/react-bindings';
 
 import { AttachmentPreview } from './attachment-preview';
-import { useSpeechToText } from './use-speech-to-text';
+import {
+  useSpeechToText,
+  type UseSpeechToTextOptions,
+} from './use-speech-to-text';
 import { useStableCallback } from '../../hooks/use-stable-callback';
 
 const nanoId = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 15);
@@ -325,7 +328,11 @@ const TextInput = (props: ComponentPropsWithoutRef<'input'>) => {
   );
 };
 
-const SpeechToTextButton = (props: ComponentPropsWithoutRef<'button'>) => {
+const SpeechToTextButton = (
+  props: ComponentPropsWithoutRef<'button'> & {
+    options: UseSpeechToTextOptions;
+  },
+) => {
   const { setText } = useText();
 
   const { startListening, stopListening, isListening } = useSpeechToText({

packages/react-sdk/src/components/composer/use-speech-to-text.ts

@@ -63,7 +63,7 @@ declare global {
   }
 }
 
-interface UseSpeechToTextOptions {
+export type UseSpeechToTextOptions = {
   /**
    * Language for speech recognition (e.g., 'en-US', 'es-ES')
    * @default 'en-US'
@@ -92,7 +92,7 @@ interface UseSpeechToTextOptions {
    * Callback when an error occurs
    */
   onError?: (error: string) => void;
-}
+};
 
 export const useSpeechToText = (options: UseSpeechToTextOptions = {}) => {
   const {

packages/react-sdk/src/components/streaming-message.tsx

@@ -3,7 +3,7 @@ import { AIMarkdown } from './ai-markdown';
 import { useEffect, useRef, useState } from 'react';
 
 export type UseMessageTextStreamingProps = {
-  streamingLetterIntervalMs?: number;
+  letterIntervalMs?: number;
   renderingLetterCount?: number;
   text: string;
 };
@@ -14,14 +14,14 @@ const DEFAULT_RENDERING_LETTER_COUNT = 2;
 /**
  * A hook that returns text in a streamed, typewriter fashion. The speed of streaming is
  * configurable.
- * @param {number} [streamingLetterIntervalMs=30] - The timeout between each typing animation in milliseconds.
+ * @param {number} [letterIntervalMs=30] - The timeout between each typing animation in milliseconds.
  * @param {number} [renderingLetterCount=2] - The number of letters to be rendered each time we update.
  * @param {string} text - The text that we want to render in a typewriter fashion.
  * @returns {{ streamedMessageText: string }} - A substring of the text property, up until we've finished rendering the typewriter animation.
  */
 export const useMessageTextStreaming = ({
   renderingLetterCount = DEFAULT_RENDERING_LETTER_COUNT,
-  streamingLetterIntervalMs = DEFAULT_LETTER_INTERVAL,
+  letterIntervalMs = DEFAULT_LETTER_INTERVAL,
   text,
 }: UseMessageTextStreamingProps): { streamedMessageText: string } => {
   const [streamedMessageText, setStreamedMessageText] = useState<string>(text);
@@ -37,21 +37,25 @@ export const useMessageTextStreaming = ({
       const newText = text.substring(0, newCursorValue);
       textCursor.current += newText.length - textCursor.current;
       setStreamedMessageText(newText);
-    }, streamingLetterIntervalMs);
+    }, letterIntervalMs);
 
     return () => {
       clearInterval(interval);
     };
-  }, [streamingLetterIntervalMs, renderingLetterCount, text]);
+  }, [letterIntervalMs, renderingLetterCount, text]);
 
   return { streamedMessageText };
 };
 
-export const StreamingMessage = ({ text }: { text: string }) => {
+export const StreamingMessage = ({
+  text,
+  renderingLetterCount = DEFAULT_RENDERING_LETTER_COUNT,
+  letterIntervalMs = DEFAULT_LETTER_INTERVAL,
+}: { text: string } & UseMessageTextStreamingProps) => {
   const streamedText = useMessageTextStreaming({
     text,
-    renderingLetterCount: 3,
-    streamingLetterIntervalMs: 20,
+    renderingLetterCount,
+    letterIntervalMs,
   }).streamedMessageText;
 
   return (

packages/react-sdk/src/components/tools/charts/chartJsSchema.ts

@@ -12,7 +12,9 @@ export const chartJsSchema = zod.object({
     'scatter',
   ]),
   data: zod.object({
-    labels: zod.array(zod.string()).optional(),
+    labels: zod.array(zod.union([zod.string(), zod.number()])).optional(),
+    xLabels: zod.array(zod.union([zod.string(), zod.number()])).optional(),
+    yLabels: zod.array(zod.union([zod.string(), zod.number()])).optional(),
     datasets: zod.array(
       zod.object({
         label: zod.string().optional(),
@@ -48,77 +50,4 @@ export const chartJsSchema = zod.object({
       }),
     ),
   }),
-  options: zod
-    .object({
-      responsive: zod.boolean().optional(),
-      maintainAspectRatio: zod.boolean().optional(),
-      aspectRatio: zod.number().optional(),
-      plugins: zod
-        .object({
-          title: zod
-            .object({
-              display: zod.boolean().optional(),
-              text: zod.string().optional(),
-              align: zod.enum(['start', 'center', 'end']).optional(),
-              font: zod
-                .object({
-                  size: zod.number().optional(),
-                  weight: zod.union([zod.string(), zod.number()]).optional(),
-                  family: zod.string().optional(),
-                })
-                .optional(),
-            })
-            .optional(),
-          legend: zod
-            .object({
-              display: zod.boolean().optional(),
-              position: zod.enum(['top', 'left', 'bottom', 'right']).optional(),
-            })
-            .optional(),
-          tooltip: zod
-            .object({
-              enabled: zod.boolean().optional(),
-            })
-            .optional(),
-        })
-        .optional(),
-      scales: zod
-        .object({
-          x: zod
-            .object({
-              display: zod.boolean().optional(),
-              title: zod
-                .object({
-                  display: zod.boolean().optional(),
-                  text: zod.string().optional(),
-                })
-                .optional(),
-              grid: zod
-                .object({
-                  display: zod.boolean().optional(),
-                })
-                .optional(),
-            })
-            .optional(),
-          y: zod
-            .object({
-              display: zod.boolean().optional(),
-              title: zod
-                .object({
-                  display: zod.boolean().optional(),
-                  text: zod.string().optional(),
-                })
-                .optional(),
-              grid: zod
-                .object({
-                  display: zod.boolean().optional(),
-                })
-                .optional(),
-              beginAtZero: zod.boolean().optional(),
-            })
-            .optional(),
-        })
-        .optional(),
-    })
-    .optional(),
 });

packages/react-sdk/src/components/tools/charts/charts.tsx

@@ -22,6 +22,7 @@ import {
   Scatter,
 } from 'react-chartjs-2';
 import type { ToolComponentProps } from '../../ai-markdown';
+import { chartJsSchema } from './chartJsSchema';
 
 ChartJS.register(
   ArcElement,
@@ -48,28 +49,29 @@ const components = {
 } as const;
 
 const Chart = ({ data, fallback }: ToolComponentProps) => {
-  const parsedData = useMemo(() => {
+  const parsedDataOrError = useMemo(() => {
     try {
-      return JSON.parse(data);
-    } catch {
-      return new Error('Invalid JSON data for Chart.js');
+      return chartJsSchema.parse(JSON.parse(data));
+    } catch (error) {
+      if (error instanceof Error) {
+        error.message = `Error occured while parsing Chart.js data: ${error.message}`;
+        return error;
+      }
+      return new Error('Unknown error occured while parsing Chart.js data');
     }
   }, [data]);
 
-  if (parsedData instanceof Error) {
+  if (parsedDataOrError instanceof Error) {
     return fallback;
   }
 
   const Component =
-    components[parsedData.type as keyof typeof components] ??
+    components[parsedDataOrError.type as keyof typeof components] ??
     components.unknown;
 
   return (
     <div className="aicr__chart">
-      <Component
-        data={parsedData.data}
-        options={{ ...parsedData.options, responsive: true }}
-      />
+      <Component data={parsedDataOrError.data} options={{ responsive: true }} />
     </div>
   );
 };