@assistant-ui/react 0.11.58 → 0.12.1

package/src/legacy-runtime/client/ThreadListItemRuntimeClient.ts

@@ -1,18 +1,20 @@
 import { resource, tapEffect } from "@assistant-ui/tap";
+import { type ClientOutput, tapAssistantEmit } from "@assistant-ui/store";
 import {
   ThreadListItemEventType,
   ThreadListItemRuntime,
 } from "../runtime/ThreadListItemRuntime";
 import { Unsubscribe } from "../../types";
-import { tapApi } from "../../utils/tap-store";
 import { tapSubscribable } from "../util-hooks/tapSubscribable";
-import { tapEvents } from "../../client/EventContext";
-import { ThreadListItemClientApi } from "../../client/types/ThreadListItem";
 
 export const ThreadListItemClient = resource(
-  ({ runtime }: { runtime: ThreadListItemRuntime }) => {
-    const runtimeState = tapSubscribable(runtime);
-    const events = tapEvents();
+  ({
+    runtime,
+  }: {
+    runtime: ThreadListItemRuntime;
+  }): ClientOutput<"threadListItem"> => {
+    const state = tapSubscribable(runtime);
+    const emit = tapAssistantEmit();
 
     // Bind thread list item events to event manager
     tapEffect(() => {
@@ -20,13 +22,13 @@ export const ThreadListItemClient = resource(
 
       // Subscribe to thread list item events
       const threadListItemEvents: ThreadListItemEventType[] = [
-        "switched-to",
-        "switched-away",
+        "switchedTo",
+        "switchedAway",
       ];
 
       for (const event of threadListItemEvents) {
         const unsubscribe = runtime.unstable_on(event, () => {
-          events.emit(`thread-list-item.${event}`, {
+          emit(`threadListItem.${event}`, {
             threadId: runtime.getState()!.id,
           });
         });
@@ -36,11 +38,12 @@ export const ThreadListItemClient = resource(
       return () => {
         for (const unsub of unsubscribers) unsub();
       };
-    }, [runtime, events]);
+    }, [runtime, emit]);
 
-    return tapApi<ThreadListItemClientApi>(
-      {
-        getState: () => runtimeState,
+    return {
+      state,
+      methods: {
+        getState: () => state,
         switchTo: runtime.switchTo,
         rename: runtime.rename,
         archive: runtime.archive,
@@ -51,9 +54,6 @@ export const ThreadListItemClient = resource(
         detach: runtime.detach,
         __internal_getRuntime: () => runtime,
       },
-      {
-        key: runtimeState.id,
-      },
-    );
+    };
   },
 );

package/src/legacy-runtime/client/ThreadListRuntimeClient.ts

@@ -1,14 +1,19 @@
-import { tapApi } from "../../utils/tap-store";
-import { resource, tapInlineResource, tapMemo } from "@assistant-ui/tap";
+import {
+  withKey,
+  resource,
+  tapInlineResource,
+  tapMemo,
+} from "@assistant-ui/tap";
+import {
+  type ClientOutput,
+  tapClientLookup,
+  tapClientResource,
+} from "@assistant-ui/store";
 import { ThreadListRuntime } from "../runtime/ThreadListRuntime";
 import { tapSubscribable } from "../util-hooks/tapSubscribable";
 import { ThreadListItemClient } from "./ThreadListItemRuntimeClient";
 import { ThreadClient } from "./ThreadRuntimeClient";
-import { tapLookupResources } from "../../client/util-hooks/tapLookupResources";
-import {
-  ThreadListClientState,
-  ThreadListClientApi,
-} from "../../client/types/ThreadList";
+import { ThreadsState } from "../../types/scopes";
 import type { AssistantRuntime } from "../runtime/AssistantRuntime";
 
 const ThreadListItemClientById = resource(
@@ -32,64 +37,64 @@ export const ThreadListClient = resource(
   }: {
     runtime: ThreadListRuntime;
     __internal_assistantRuntime: AssistantRuntime;
-  }) => {
+  }): ClientOutput<"threads"> => {
     const runtimeState = tapSubscribable(runtime);
 
-    const main = tapInlineResource(
+    const main = tapClientResource(
       ThreadClient({
         runtime: runtime.main,
       }),
     );
 
-    const threadItems = tapLookupResources(
-      Object.keys(runtimeState.threadItems).map((id) => [
-        id,
-        ThreadListItemClientById({ runtime, id }),
-      ]),
+    const threadItems = tapClientLookup(
+      () =>
+        Object.keys(runtimeState.threadItems).map((id) =>
+          withKey(id, ThreadListItemClientById({ runtime, id })),
+        ),
+      [runtimeState.threadItems, runtime],
     );
 
-    const state = tapMemo<ThreadListClientState>(() => {
+    const state = tapMemo<ThreadsState>(() => {
       return {
         mainThreadId: runtimeState.mainThreadId,
-        newThreadId: runtimeState.newThread ?? null,
+        newThreadId: runtimeState.newThreadId ?? null,
         isLoading: runtimeState.isLoading,
-        threadIds: runtimeState.threads,
-        archivedThreadIds: runtimeState.archivedThreads,
+        threadIds: runtimeState.threadIds,
+        archivedThreadIds: runtimeState.archivedThreadIds,
         threadItems: threadItems.state,
 
         main: main.state,
       };
     }, [runtimeState, threadItems.state, main.state]);
 
-    return tapApi<ThreadListClientApi>({
-      getState: () => state,
-
-      thread: () => main.api,
-
-      item: (threadIdOrOptions) => {
-        if (threadIdOrOptions === "main") {
-          return threadItems.api({ key: state.mainThreadId });
-        }
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        thread: () => main.methods,
+        item: (threadIdOrOptions) => {
+          if (threadIdOrOptions === "main") {
+            return threadItems.get({ key: state.mainThreadId });
+          }
 
-        if ("id" in threadIdOrOptions) {
-          return threadItems.api({ key: threadIdOrOptions.id });
-        }
+          if ("id" in threadIdOrOptions) {
+            return threadItems.get({ key: threadIdOrOptions.id });
+          }
 
-        const { index, archived = false } = threadIdOrOptions;
-        const id = archived
-          ? state.archivedThreadIds[index]!
-          : state.threadIds[index]!;
-        return threadItems.api({ key: id });
+          const { index, archived = false } = threadIdOrOptions;
+          const id = archived
+            ? state.archivedThreadIds[index]!
+            : state.threadIds[index]!;
+          return threadItems.get({ key: id });
+        },
+        switchToThread: async (threadId) => {
+          await runtime.switchToThread(threadId);
+        },
+        switchToNewThread: async () => {
+          await runtime.switchToNewThread();
+        },
+        __internal_getAssistantRuntime: () => __internal_assistantRuntime,
       },
-
-      switchToThread: (threadId) => {
-        runtime.switchToThread(threadId);
-      },
-      switchToNewThread: () => {
-        runtime.switchToNewThread();
-      },
-
-      __internal_getAssistantRuntime: () => __internal_assistantRuntime,
-    });
+    };
   },
 );

package/src/legacy-runtime/client/ThreadRuntimeClient.ts

@@ -6,15 +6,19 @@ import {
   tapMemo,
   tapEffect,
   type tapRef,
+  withKey,
 } from "@assistant-ui/tap";
+import {
+  type ClientOutput,
+  tapAssistantEmit,
+  tapClientLookup,
+  tapClientResource,
+} from "@assistant-ui/store";
 import { ComposerClient } from "./ComposerRuntimeClient";
 import { MessageClient } from "./MessageRuntimeClient";
 import { tapSubscribable } from "../util-hooks/tapSubscribable";
-import { tapApi } from "../../utils/tap-store";
-import { tapLookupResources } from "../../client/util-hooks/tapLookupResources";
 import { Unsubscribe } from "../../types";
-import { tapEvents } from "../../client/EventContext";
-import { ThreadClientState, ThreadClientApi } from "../../client/types/Thread";
+import { ThreadState } from "../../types/scopes";
 
 const MessageClientById = resource(
   ({
@@ -38,10 +42,9 @@ const MessageClientById = resource(
 );
 
 export const ThreadClient = resource(
-  ({ runtime }: { runtime: ThreadRuntime }) => {
+  ({ runtime }: { runtime: ThreadRuntime }): ClientOutput<"thread"> => {
     const runtimeState = tapSubscribable(runtime);
-
-    const events = tapEvents();
+    const emit = tapAssistantEmit();
 
     // Bind thread events to event manager
     tapEffect(() => {
@@ -49,16 +52,16 @@ export const ThreadClient = resource(
 
       // Subscribe to thread events
       const threadEvents: ThreadRuntimeEventType[] = [
-        "run-start",
-        "run-end",
+        "runStart",
+        "runEnd",
         "initialize",
-        "model-context-update",
+        "modelContextUpdate",
       ];
 
       for (const event of threadEvents) {
         const unsubscribe = runtime.unstable_on(event, () => {
           const threadId = runtime.getState()?.threadId || "unknown";
-          events.emit(`thread.${event}`, {
+          emit(`thread.${event}`, {
             threadId,
           });
         });
@@ -68,7 +71,7 @@ export const ThreadClient = resource(
       return () => {
         for (const unsub of unsubscribers) unsub();
       };
-    }, [runtime]);
+    }, [runtime, emit]);
 
     const threadIdRef = tapMemo(
       () => ({
@@ -79,21 +82,22 @@ export const ThreadClient = resource(
       [runtime],
     );
 
-    const composer = tapInlineResource(
+    const composer = tapClientResource(
       ComposerClient({
         runtime: runtime.composer,
         threadIdRef,
       }),
     );
 
-    const messages = tapLookupResources(
-      runtimeState.messages.map((m) => [
-        m.id,
-        MessageClientById({ runtime: runtime, id: m.id, threadIdRef }),
-      ]),
+    const messages = tapClientLookup(
+      () =>
+        runtimeState.messages.map((m) =>
+          withKey(m.id, MessageClientById({ runtime, id: m.id, threadIdRef })),
+        ),
+      [runtimeState.messages, runtime, threadIdRef],
     );
 
-    const state = tapMemo<ThreadClientState>(() => {
+    const state = tapMemo<ThreadState>(() => {
       return {
         isEmpty: messages.state.length === 0 && !runtimeState.isLoading,
         isDisabled: runtimeState.isDisabled,
@@ -110,36 +114,35 @@ export const ThreadClient = resource(
       };
     }, [runtimeState, messages, composer.state]);
 
-    return tapApi<ThreadClientApi>({
-      getState: () => state,
-
-      composer: composer.api,
-
-      append: runtime.append,
-      startRun: runtime.startRun,
-      unstable_resumeRun: runtime.unstable_resumeRun,
-      cancelRun: runtime.cancelRun,
-      getModelContext: runtime.getModelContext,
-      export: runtime.export,
-      import: runtime.import,
-      reset: runtime.reset,
-      stopSpeaking: runtime.stopSpeaking,
-      startVoice: async () => {
-        throw new Error("startVoice is not supported in this runtime");
-      },
-      stopVoice: async () => {
-        throw new Error("stopVoice is not supported in this runtime");
-      },
-
-      message: (selector) => {
-        if ("id" in selector) {
-          return messages.api({ key: selector.id });
-        } else {
-          return messages.api(selector);
-        }
+    return {
+      state,
+      methods: {
+        getState: () => state,
+        composer: composer.methods,
+        append: runtime.append,
+        startRun: runtime.startRun,
+        unstable_resumeRun: runtime.unstable_resumeRun,
+        cancelRun: runtime.cancelRun,
+        getModelContext: runtime.getModelContext,
+        export: runtime.export,
+        import: runtime.import,
+        reset: runtime.reset,
+        stopSpeaking: runtime.stopSpeaking,
+        startVoice: async () => {
+          throw new Error("startVoice is not supported in this runtime");
+        },
+        stopVoice: async () => {
+          throw new Error("stopVoice is not supported in this runtime");
+        },
+        message: (selector) => {
+          if ("id" in selector) {
+            return messages.get({ key: selector.id });
+          } else {
+            return messages.get(selector);
+          }
+        },
+        __internal_getRuntime: () => runtime,
       },
-
-      __internal_getRuntime: () => runtime,
-    });
+    };
   },
 );

package/src/legacy-runtime/cloud/AssistantCloudThreadHistoryAdapter.tsx

@@ -11,15 +11,12 @@ import {
 } from "../runtime-cores/adapters/thread-history/MessageFormatAdapter";
 import { GenericThreadHistoryAdapter } from "../runtime-cores/adapters/thread-history/ThreadHistoryAdapter";
 import { ReadonlyJSONObject } from "assistant-stream/utils";
-import {
-  AssistantApi,
-  useAssistantApi,
-} from "../../context/react/AssistantApiContext";
-import { ThreadListItemClientApi } from "../../client/types/ThreadListItem";
+import { AssistantClient, useAui } from "@assistant-ui/store";
+import { ThreadListItemMethods } from "../../types/scopes";
 
 // Global WeakMap to store message ID mappings across adapter instances
 const globalMessageIdMapping = new WeakMap<
-  ThreadListItemClientApi,
+  ThreadListItemMethods,
   Record<string, string | Promise<string>>
 >();
 
@@ -58,14 +55,14 @@ class FormattedThreadHistoryAdapter<TMessage, TStorageFormat>
 class AssistantCloudThreadHistoryAdapter implements ThreadHistoryAdapter {
   constructor(
     private cloudRef: RefObject<AssistantCloud>,
-    private store: AssistantApi,
+    private aui: AssistantClient,
   ) {}
 
   private get _getIdForLocalId(): Record<string, string | Promise<string>> {
-    if (!globalMessageIdMapping.has(this.store.threadListItem())) {
-      globalMessageIdMapping.set(this.store.threadListItem(), {});
+    if (!globalMessageIdMapping.has(this.aui.threadListItem())) {
+      globalMessageIdMapping.set(this.aui.threadListItem(), {});
     }
-    return globalMessageIdMapping.get(this.store.threadListItem())!;
+    return globalMessageIdMapping.get(this.aui.threadListItem())!;
   }
 
   withFormat<TMessage, TStorageFormat>(
@@ -75,7 +72,7 @@ class AssistantCloudThreadHistoryAdapter implements ThreadHistoryAdapter {
   }
 
   async append({ parentId, message }: ExportedMessageRepositoryItem) {
-    const { remoteId } = await this.store.threadListItem().initialize();
+    const { remoteId } = await this.aui.threadListItem().initialize();
     const task = this.cloudRef.current.threads.messages
       .create(remoteId, {
         parent_id: parentId
@@ -95,7 +92,7 @@ class AssistantCloudThreadHistoryAdapter implements ThreadHistoryAdapter {
   }
 
   async load() {
-    const remoteId = this.store.threadListItem().getState().remoteId;
+    const remoteId = this.aui.threadListItem().getState().remoteId;
     if (!remoteId) return { messages: [] };
     const { messages } = await this.cloudRef.current.threads.messages.list(
       remoteId,
@@ -121,7 +118,7 @@ class AssistantCloudThreadHistoryAdapter implements ThreadHistoryAdapter {
     format: string,
     content: T,
   ) {
-    const { remoteId } = await this.store.threadListItem().initialize();
+    const { remoteId } = await this.aui.threadListItem().initialize();
 
     const task = this.cloudRef.current.threads.messages
       .create(remoteId, {
@@ -147,7 +144,7 @@ class AssistantCloudThreadHistoryAdapter implements ThreadHistoryAdapter {
       message: MessageStorageEntry<TStorageFormat>,
     ) => MessageFormatItem<TMessage>,
   ): Promise<MessageFormatRepository<TMessage>> {
-    const remoteId = this.store.threadListItem().getState().remoteId;
+    const remoteId = this.aui.threadListItem().getState().remoteId;
     if (!remoteId) return { messages: [] };
 
     const { messages } = await this.cloudRef.current.threads.messages.list(
@@ -176,9 +173,9 @@ class AssistantCloudThreadHistoryAdapter implements ThreadHistoryAdapter {
 export const useAssistantCloudThreadHistoryAdapter = (
   cloudRef: RefObject<AssistantCloud>,
 ): ThreadHistoryAdapter => {
-  const store = useAssistantApi();
+  const aui = useAui();
   const [adapter] = useState(
-    () => new AssistantCloudThreadHistoryAdapter(cloudRef, store),
+    () => new AssistantCloudThreadHistoryAdapter(cloudRef, aui),
   );
 
   return adapter;

package/src/legacy-runtime/cloud/auiV0.ts

@@ -37,6 +37,16 @@ type AuiV0MessageMessagePart =
       readonly argsText: string;
       readonly result?: ReadonlyJSONValue;
       readonly isError?: true;
+    }
+  | {
+      readonly type: "image";
+      readonly image: string;
+    }
+  | {
+      readonly type: "file";
+      readonly data: string;
+      readonly mimeType: string;
+      readonly filename?: string;
     };
 
 type AuiV0Message = {
@@ -111,8 +121,24 @@ export const auiV0Encode = (message: ThreadMessage): AuiV0Message => {
           };
         }
 
+        case "image": {
+          return {
+            type: "image",
+            image: part.image,
+          };
+        }
+
+        case "file": {
+          return {
+            type: "file",
+            data: part.data,
+            mimeType: part.mimeType,
+            ...(part.filename ? { filename: part.filename } : undefined),
+          };
+        }
+
         default: {
-          const unhandledType: "image" | "file" | "audio" | "data" = type;
+          const unhandledType: "audio" | "data" = type;
           throw new Error(
             `Message part type not supported by aui/v0: ${unhandledType}`,
           );

package/src/legacy-runtime/hooks/AssistantContext.ts

@@ -1,12 +1,12 @@
 "use client";
 
-import { useAssistantApi } from "../../context/react/AssistantApiContext";
+import { useAui } from "@assistant-ui/store";
 import { AssistantRuntime } from "../runtime/AssistantRuntime";
 import type { ThreadListRuntime } from "../runtime/ThreadListRuntime";
 import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime";
 
 /**
- * @deprecated Use `useAssistantApi()` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAui()` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  *
  * Hook to access the AssistantRuntime from the current context.
  *
@@ -30,9 +30,9 @@ import { createStateHookForRuntime } from "../../context/react/utils/createState
  *
  * // After:
  * function MyComponent() {
- *   const api = useAssistantApi();
+ *   const aui = useAui();
  *   const handleNewThread = () => {
- *     api.threads().switchToNewThread();
+ *     aui.threads().switchToNewThread();
  *   };
  *   return <button onClick={handleNewThread}>New Thread</button>;
  * }
@@ -47,8 +47,8 @@ export function useAssistantRuntime(options?: {
 export function useAssistantRuntime(options?: {
   optional?: boolean | undefined;
 }) {
-  const api = useAssistantApi();
-  const runtime = api.threads().__internal_getAssistantRuntime?.() ?? null;
+  const aui = useAui();
+  const runtime = aui.threads().__internal_getAssistantRuntime?.() ?? null;
 
   if (!runtime && !options?.optional) {
     throw new Error("AssistantRuntime is not available");
@@ -62,6 +62,6 @@ const useThreadListRuntime = (opt: {
 }): ThreadListRuntime | null => useAssistantRuntime(opt)?.threads ?? null;
 
 /**
- * @deprecated Use `useAssistantState(({ threads }) => threads)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAuiState(({ threads }) => threads)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  */
 export const useThreadList = createStateHookForRuntime(useThreadListRuntime);

package/src/legacy-runtime/hooks/AttachmentContext.ts

@@ -2,10 +2,10 @@
 
 import { AttachmentRuntime } from "../runtime/AttachmentRuntime";
 import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime";
-import { useAssistantApi, useAssistantState } from "../../context/react";
+import { useAui, useAuiState } from "@assistant-ui/store";
 
 /**
- * @deprecated Use `useAssistantApi()` with `api.attachment()` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAui()` with `aui.attachment()` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  */
 export function useAttachmentRuntime(options?: {
   optional?: false | undefined;
@@ -16,10 +16,10 @@ export function useAttachmentRuntime(options?: {
 export function useAttachmentRuntime(options?: {
   optional?: boolean | undefined;
 }): AttachmentRuntime | null {
-  const api = useAssistantApi();
-  const runtime = useAssistantState(() =>
-    api.attachment.source
-      ? (api.attachment().__internal_getRuntime?.() ?? null)
+  const aui = useAui();
+  const runtime = useAuiState(() =>
+    aui.attachment.source
+      ? (aui.attachment().__internal_getRuntime?.() ?? null)
       : null,
   );
   if (!runtime && !options?.optional) {
@@ -84,7 +84,7 @@ export function useMessageAttachmentRuntime(options?: {
 }
 
 /**
- * @deprecated Use `useAssistantState(({ attachment }) => attachment)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAuiState(({ attachment }) => attachment)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  */
 export const useAttachment = createStateHookForRuntime(useAttachmentRuntime);
 

package/src/legacy-runtime/hooks/ComposerContext.ts

@@ -1,11 +1,11 @@
 "use client";
 
-import { useAssistantApi, useAssistantState } from "../../context/react";
+import { useAui, useAuiState } from "@assistant-ui/store";
 import { ComposerRuntime } from "../runtime/ComposerRuntime";
 import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime";
 
 /**
- * @deprecated Use `useAssistantApi()` with `api.composer()` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAui()` with `aui.composer()` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  *
  * Hook to access the ComposerRuntime from the current context.
  *
@@ -43,17 +43,17 @@ import { createStateHookForRuntime } from "../../context/react/utils/createState
  *
  * // After:
  * function ComposerActions() {
- *   const api = useAssistantApi();
- *   const canSend = useAssistantState(({ composer }) => composer.canSend);
- *   const canCancel = useAssistantState(({ composer }) => composer.canCancel);
+ *   const aui = useAui();
+ *   const canSend = useAuiState(({ composer }) => composer.canSend);
+ *   const canCancel = useAuiState(({ composer }) => composer.canCancel);
  *   const handleSend = () => {
  *     if (canSend) {
- *       api.composer().send();
+ *       aui.composer().send();
  *     }
  *   };
  *   const handleCancel = () => {
  *     if (canCancel) {
- *       api.composer().cancel();
+ *       aui.composer().cancel();
  *     }
  *   };
  *   return (
@@ -74,10 +74,10 @@ export function useComposerRuntime(options?: {
 export function useComposerRuntime(options?: {
   optional?: boolean | undefined;
 }): ComposerRuntime | null {
-  const api = useAssistantApi();
-  const runtime = useAssistantState(() =>
-    api.composer.source
-      ? (api.composer().__internal_getRuntime?.() ?? null)
+  const aui = useAui();
+  const runtime = useAuiState(() =>
+    aui.composer.source
+      ? (aui.composer().__internal_getRuntime?.() ?? null)
       : null,
   );
   if (!runtime && !options?.optional) {
@@ -87,7 +87,7 @@ export function useComposerRuntime(options?: {
 }
 
 /**
- * @deprecated Use `useAssistantState(({ composer }) => composer)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAuiState(({ composer }) => composer)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  *
  * Hook to access the current composer state.
  *
@@ -115,9 +115,9 @@ export function useComposerRuntime(options?: {
  *
  * // After:
  * function ComposerStatus() {
- *   const text = useAssistantState(({ composer }) => composer.text);
- *   const canSend = useAssistantState(({ composer }) => composer.canSend);
- *   const attachmentCount = useAssistantState(({ composer }) => composer.attachments.length);
+ *   const text = useAuiState(({ composer }) => composer.text);
+ *   const canSend = useAuiState(({ composer }) => composer.canSend);
+ *   const attachmentCount = useAuiState(({ composer }) => composer.attachments.length);
  *   return (
  *     <div>
  *       Text: {text.length} chars,