@assistant-ui/react 0.7.23 → 0.7.25

package/src/runtimes/remote-thread-list/cloud/AssistantCloudThreads.tsx

@@ -0,0 +1,72 @@
+import { AssistantCloudAPI } from "./AssistantCloudAPI";
+
+type AssistantCloudThreadsListQuery = {
+  is_archived?: boolean;
+  limit?: number;
+  after?: string;
+};
+
+type CloudThread = {
+  title: string;
+  last_message_at: Date;
+  metadata: unknown;
+  external_id: string | null;
+  id: string;
+  project_id: string;
+  created_at: Date;
+  updated_at: Date;
+  workspace_id: string;
+  is_archived: boolean;
+};
+
+type AssistantCloudThreadsListResponse = {
+  threads: CloudThread[];
+};
+
+type AssistantCloudThreadsCreateBody = {
+  title: string;
+  last_message_at: Date;
+  metadata?: unknown | undefined;
+  external_id?: string | undefined;
+};
+
+type AssistantCloudThreadsCreateResponse = {
+  thread_id: string;
+};
+
+type AssistantCloudThreadsUpdateBody = {
+  title?: string | undefined;
+  last_message_at?: Date | undefined;
+  metadata?: unknown | undefined;
+  is_archived?: boolean | undefined;
+};
+
+export class AssistantCloudThreads {
+  constructor(private cloud: AssistantCloudAPI) {}
+
+  public async list(
+    query?: AssistantCloudThreadsListQuery,
+  ): Promise<AssistantCloudThreadsListResponse> {
+    return this.cloud.makeRequest("/threads", { query });
+  }
+
+  public async create(
+    body: AssistantCloudThreadsCreateBody,
+  ): Promise<AssistantCloudThreadsCreateResponse> {
+    return this.cloud.makeRequest("/threads", { method: "POST", body });
+  }
+
+  public async update(
+    threadId: string,
+    body: AssistantCloudThreadsUpdateBody,
+  ): Promise<void> {
+    return this.cloud.makeRequest(`/threads/${threadId}`, {
+      method: "PUT",
+      body,
+    });
+  }
+
+  public async delete(threadId: string): Promise<void> {
+    return this.cloud.makeRequest(`/threads/${threadId}`, { method: "DELETE" });
+  }
+}

package/src/runtimes/remote-thread-list/cloud/CloudContext.tsx

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+
+export type CloudInitializeResponse = {
+  remoteId: string;
+  externalId: string | undefined;
+};
+
+type CloudContextValue = {
+  initialize: () => Promise<CloudInitializeResponse>;
+};
+
+export const CloudContext = createContext<CloudContextValue | null>(null);

package/src/runtimes/remote-thread-list/cloud/index.ts

@@ -0,0 +1,3 @@
+export { useCloudThreadListRuntime } from "./useCloudThreadListRuntime";
+export { useCloudGetOrCreateThread } from "./useCloudGetOrCreateThread";
+export { AssistantCloud } from "./AssistantCloud";

package/src/runtimes/remote-thread-list/cloud/useCloudGetOrCreateThread.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useContext } from "react";
+import { useThreadListItem } from "../../../context/react/ThreadListItemContext";
+import { CloudContext } from "./CloudContext";
+
+export const useCloudGetOrCreateThread = () => {
+  const currentId = useThreadListItem((i) => i.externalId);
+  const cloudContextValue = useContext(CloudContext);
+  if (!cloudContextValue) throw new Error("CloudContext not available");
+
+  return async () => {
+    let externalId = currentId;
+    if (!externalId) {
+      externalId = (await cloudContextValue.initialize()).externalId;
+    }
+    return { externalId };
+  };
+};

package/src/runtimes/remote-thread-list/cloud/useCloudThreadListRuntime.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { AssistantRuntime } from "@assistant-ui/react";
+import { PropsWithChildren, useEffect, useMemo, useRef } from "react";
+import { useRemoteThreadListRuntime } from "../useRemoteThreadListRuntime";
+import { AssistantCloud } from "./AssistantCloud";
+import { CloudContext, CloudInitializeResponse } from "./CloudContext";
+
+type ThreadData = {
+  externalId: string;
+};
+
+type CloudThreadListAdapter = {
+  cloud: AssistantCloud;
+
+  runtimeHook: () => AssistantRuntime;
+
+  create?(): Promise<ThreadData>;
+  delete?(threadId: string): Promise<void>;
+};
+
+export const useCloudThreadListRuntime = (adapter: CloudThreadListAdapter) => {
+  const adapterRef = useRef(adapter);
+  useEffect(() => {
+    adapterRef.current = adapter;
+  }, [adapter]);
+
+  const cloudContextValue = useMemo(() => {
+    const subscribers = new Set<
+      (result: Promise<CloudInitializeResponse>) => void
+    >();
+    return {
+      initialize: async () => {
+        const createTask = adapterRef.current.create?.() ?? Promise.resolve();
+        const task = createTask.then(async (t) => {
+          const external_id = t ? t.externalId : undefined;
+          const { thread_id } = await adapterRef.current.cloud.threads.create({
+            title: "New Thread",
+            last_message_at: new Date(),
+            external_id,
+          });
+          return { externalId: external_id, remoteId: thread_id };
+        });
+        for (const subscriber of subscribers) {
+          subscriber(task);
+        }
+        return task;
+      },
+      subscribe: (
+        callback: (result: Promise<CloudInitializeResponse>) => void,
+      ) => {
+        subscribers.add(callback);
+        return () => {
+          subscribers.delete(callback);
+        };
+      },
+    };
+  }, []);
+
+  const runtime = useRemoteThreadListRuntime({
+    runtimeHook: adapter.runtimeHook,
+    list: async () => {
+      const { threads } = await adapter.cloud.threads.list();
+      return {
+        threads: threads.map((t) => ({
+          status: t.is_archived ? "archived" : "regular",
+          remoteId: t.id,
+          title: t.title,
+          externalId: t.external_id ?? undefined,
+        })),
+      };
+    },
+    rename: async (threadId, newTitle) => {
+      return adapter.cloud.threads.update(threadId, { title: newTitle });
+    },
+    archive: async (threadId) => {
+      return adapter.cloud.threads.update(threadId, { is_archived: true });
+    },
+    unarchive: async (threadId) => {
+      return adapter.cloud.threads.update(threadId, { is_archived: false });
+    },
+    delete: async (threadId) => {
+      await adapter.delete?.(threadId);
+      return adapter.cloud.threads.delete(threadId);
+    },
+    onInitialize: (callback) => {
+      return cloudContextValue.subscribe(callback);
+    },
+    __internal_RenderComponent: ({ children }: PropsWithChildren) => {
+      console.log("RENDER COMPONENT");
+      return (
+        <CloudContext.Provider value={cloudContextValue}>
+          {children}
+        </CloudContext.Provider>
+      );
+    },
+  });
+
+  return runtime;
+};

package/src/runtimes/remote-thread-list/index.ts

@@ -0,0 +1,2 @@
+// export { useRemoteThreadListRuntime } from "./useRemoteThreadListRuntime";
+export * from "./cloud";

package/src/runtimes/remote-thread-list/types.tsx

@@ -0,0 +1,34 @@
+import { FC, PropsWithChildren } from "react";
+import { AssistantRuntime } from "../../api";
+import { Unsubscribe } from "../../types";
+import { CloudInitializeResponse } from "./cloud/CloudContext";
+
+export type RemoteThreadMetadata = {
+  readonly status: "regular" | "archived";
+  readonly remoteId: string;
+  readonly externalId?: string | undefined;
+  readonly title?: string | undefined;
+};
+
+export type RemoteThreadListResponse = {
+  threads: RemoteThreadMetadata[];
+};
+
+export type RemoteThreadListHook = () => AssistantRuntime;
+
+export type RemoteThreadListAdapter = {
+  runtimeHook: RemoteThreadListHook;
+
+  list(): Promise<RemoteThreadListResponse>;
+
+  rename(remoteId: string, newTitle: string): Promise<void>;
+  archive(remoteId: string): Promise<void>;
+  unarchive(remoteId: string): Promise<void>;
+  delete(remoteId: string): Promise<void>;
+
+  onInitialize(
+    callback: (task: Promise<CloudInitializeResponse>) => Promise<void>,
+  ): Unsubscribe;
+
+  __internal_RenderComponent?: FC<PropsWithChildren>;
+};

package/src/runtimes/remote-thread-list/useRemoteThreadListRuntime.tsx

@@ -0,0 +1,28 @@
+import { useState, useEffect, useMemo } from "react";
+import { BaseAssistantRuntimeCore } from "../core/BaseAssistantRuntimeCore";
+import { RemoteThreadListThreadListRuntimeCore } from "./RemoteThreadListThreadListRuntimeCore";
+import { RemoteThreadListAdapter } from "./types";
+import { AssistantRuntimeImpl } from "../../internal";
+
+class RemoteThreadListRuntimeCore extends BaseAssistantRuntimeCore {
+  public readonly threadList;
+
+  constructor(adapter: RemoteThreadListAdapter) {
+    super();
+    this.threadList = new RemoteThreadListThreadListRuntimeCore(adapter);
+  }
+
+  public get __internal_RenderComponent() {
+    return this.threadList.__internal_RenderComponent;
+  }
+}
+
+export const useRemoteThreadListRuntime = (
+  adapter: RemoteThreadListAdapter,
+) => {
+  const [runtime] = useState(() => new RemoteThreadListRuntimeCore(adapter));
+  useEffect(() => {
+    runtime.threadList.__internal_setAdapter(adapter);
+  }, [runtime, adapter]);
+  return useMemo(() => AssistantRuntimeImpl.create(runtime), [runtime]);
+};

package/src/styles/tailwindcss/thread.css

@@ -73,7 +73,11 @@
 /* attachment */
 
 .aui-attachment-root {
-  @apply relative mt-3 flex h-12 w-40 items-center justify-center gap-2 rounded-lg border p-1;
+  @apply relative mt-3;
+}
+
+.aui-attachment-content {
+  @apply flex h-12 w-40 items-center justify-center gap-2 rounded-lg border p-1;
 }
 
 .aui-attachment-preview-trigger {

package/src/ui/attachment-ui.tsx

@@ -29,6 +29,10 @@ const AttachmentRoot = withDefaults(AttachmentPrimitive.Root, {
   className: "aui-attachment-root",
 });
 
+const AttachmentContent = withDefaults("div", {
+  className: "aui-attachment-content",
+});
+
 AttachmentRoot.displayName = "AttachmentRoot";
 
 const useFileSrc = (file: File | undefined) => {
@@ -141,20 +145,22 @@ const AttachmentUI: FC = () => {
   });
   return (
     <Tooltip>
-      <AttachmentPreviewDialog>
-        <TooltipTrigger asChild>
-          <AttachmentRoot>
-            <AttachmentThumb />
-            <div className="aui-attachment-text">
-              <p className="aui-attachment-name">
-                <AttachmentPrimitive.Name />
-              </p>
-              <p className="aui-attachment-type">{typeLabel}</p>
-            </div>
-            {canRemove && <AttachmentRemove />}
-          </AttachmentRoot>
-        </TooltipTrigger>
-      </AttachmentPreviewDialog>
+      <AttachmentRoot>
+        <AttachmentPreviewDialog>
+          <TooltipTrigger asChild>
+            <AttachmentContent>
+              <AttachmentThumb />
+              <div className="aui-attachment-text">
+                <p className="aui-attachment-name">
+                  <AttachmentPrimitive.Name />
+                </p>
+                <p className="aui-attachment-type">{typeLabel}</p>
+              </div>
+            </AttachmentContent>
+          </TooltipTrigger>
+        </AttachmentPreviewDialog>
+        {canRemove && <AttachmentRemove />}
+      </AttachmentRoot>
       <TooltipContent side="top">
         <AttachmentPrimitive.Name />
       </TooltipContent>

package/src/utils/createActionButton.tsx

@@ -1,10 +1,17 @@
 "use client";
 
-import { ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import {
+  ElementRef,
+  forwardRef,
+  ComponentPropsWithoutRef,
+  MouseEventHandler,
+} from "react";
 import { Primitive } from "@radix-ui/react-primitive";
 import { composeEventHandlers } from "@radix-ui/primitive";
 
-type ActionButtonCallback<TProps> = (props: TProps) => null | (() => void);
+type ActionButtonCallback<TProps> = (
+  props: TProps,
+) => MouseEventHandler<HTMLButtonElement> | null;
 
 type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
 
@@ -33,16 +40,14 @@ export const createActionButton = <TProps,>(
       }
     });
 
-    const callback = useActionButton(forwardedProps as TProps);
+    const callback = useActionButton(forwardedProps as TProps) ?? undefined;
     return (
       <Primitive.button
         type="button"
         {...primitiveProps}
         ref={forwardedRef}
         disabled={primitiveProps.disabled || !callback}
-        onClick={composeEventHandlers(primitiveProps.onClick, () => {
-          callback?.();
-        })}
+        onClick={composeEventHandlers(primitiveProps.onClick, callback)}
       />
     );
   });