@assistant-ui/react 0.5.92 → 0.5.94

package/src/runtimes/utils/MessageRepository.tsx

@@ -0,0 +1,279 @@
+import type { CoreMessage, ThreadMessage } from "../../types/AssistantTypes";
+import { generateOptimisticId } from "../../utils/idUtils";
+import { fromCoreMessage } from "../edge/converters/fromCoreMessage";
+
+type RepositoryParent = {
+  children: string[];
+  next: RepositoryMessage | null;
+};
+
+type RepositoryMessage = RepositoryParent & {
+  prev: RepositoryMessage | null;
+  current: ThreadMessage;
+  level: number;
+};
+
+export interface ExportedMessageRepository {
+  headId?: string | null;
+  messages: Array<{
+    message: ThreadMessage;
+    parentId: string | null;
+  }>;
+}
+
+const findHead = (
+  message: RepositoryMessage | RepositoryParent,
+): RepositoryMessage | null => {
+  if (message.next) return findHead(message.next);
+  if ("current" in message) return message;
+  return null;
+};
+
+export class MessageRepository {
+  private messages = new Map<string, RepositoryMessage>(); // message_id -> item
+  private head: RepositoryMessage | null = null;
+  private root: RepositoryParent = {
+    children: [],
+    next: null,
+  };
+
+  private performOp(
+    newParent: RepositoryMessage | null,
+    child: RepositoryMessage,
+    operation: "cut" | "link" | "relink",
+  ) {
+    const parentOrRoot = child.prev ?? this.root;
+    const newParentOrRoot = newParent ?? this.root;
+
+    if (operation === "relink" && parentOrRoot === newParentOrRoot) return;
+
+    // cut
+    if (operation !== "link") {
+      // remove from parentOrRoot.children
+      parentOrRoot.children = parentOrRoot.children.filter(
+        (m) => m !== child.current.id,
+      );
+
+      // update parentOrRoot.next
+      if (parentOrRoot.next === child) {
+        const fallbackId = parentOrRoot.children.at(-1);
+        const fallback = fallbackId ? this.messages.get(fallbackId) : null;
+        if (fallback === undefined) {
+          throw new Error(
+            "MessageRepository(performOp/cut): Fallback sibling message not found. This is likely an internal bug in assistant-ui.",
+          );
+        }
+        parentOrRoot.next = fallback;
+      }
+    }
+
+    // link
+    if (operation !== "cut") {
+      // ensure the child is not part of parent tree
+      for (
+        let current: RepositoryMessage | null = newParent;
+        current;
+        current = current.prev
+      ) {
+        if (current.current.id === child.current.id) {
+          throw new Error(
+            "MessageRepository(performOp/link): A message with the same id already exists in the parent tree. This error occurs if the same message id is found multiple times. This is likely an internal bug in assistant-ui.",
+          );
+        }
+      }
+
+      // add to parentOrRoot.children
+      newParentOrRoot.children = [
+        ...newParentOrRoot.children,
+        child.current.id,
+      ];
+
+      // update parentOrRoot.next
+      if (findHead(child) === this.head || newParentOrRoot.next === null) {
+        newParentOrRoot.next = child;
+      }
+
+      child.prev = newParent;
+    }
+  }
+  getMessages() {
+    const messages = new Array<ThreadMessage>(this.head?.level ?? 0);
+    for (let current = this.head; current; current = current.prev) {
+      messages[current.level] = current.current;
+    }
+    return messages;
+  }
+
+  addOrUpdateMessage(parentId: string | null, message: ThreadMessage) {
+    const existingItem = this.messages.get(message.id);
+    const prev = parentId ? this.messages.get(parentId) : null;
+    if (prev === undefined)
+      throw new Error(
+        "MessageRepository(addOrUpdateMessage): Parent message not found. This is likely an internal bug in assistant-ui.",
+      );
+
+    // update existing message
+    if (existingItem) {
+      existingItem.current = message;
+      this.performOp(prev, existingItem, "relink");
+      return;
+    }
+
+    // create a new message
+    const newItem: RepositoryMessage = {
+      prev,
+      current: message,
+      next: null,
+      children: [],
+      level: prev ? prev.level + 1 : 0,
+    };
+
+    this.messages.set(message.id, newItem);
+    this.performOp(prev, newItem, "link");
+
+    if (this.head === prev) {
+      this.head = newItem;
+    }
+  }
+
+  getMessage(messageId: string) {
+    const message = this.messages.get(messageId);
+    if (!message)
+      throw new Error(
+        "MessageRepository(updateMessage): Message not found. This is likely an internal bug in assistant-ui.",
+      );
+
+    return {
+      parentId: message.prev?.current.id ?? null,
+      message: message.current,
+    };
+  }
+
+  appendOptimisticMessage(parentId: string | null, message: CoreMessage) {
+    let optimisticId: string;
+    do {
+      optimisticId = generateOptimisticId();
+    } while (this.messages.has(optimisticId));
+
+    this.addOrUpdateMessage(
+      parentId,
+      fromCoreMessage(message, {
+        id: optimisticId,
+        status: { type: "running" },
+      }),
+    );
+
+    return optimisticId;
+  }
+
+  deleteMessage(messageId: string, replacementId?: string | null | undefined) {
+    const message = this.messages.get(messageId);
+
+    if (!message)
+      throw new Error(
+        "MessageRepository(deleteMessage): Optimistic message not found. This is likely an internal bug in assistant-ui.",
+      );
+
+    const replacement =
+      replacementId === undefined
+        ? message.prev // if no replacementId is provided, use the parent
+        : replacementId === null
+          ? null
+          : this.messages.get(replacementId);
+    if (replacement === undefined)
+      throw new Error(
+        "MessageRepository(deleteMessage): Replacement not found. This is likely an internal bug in assistant-ui.",
+      );
+
+    for (const child of message.children) {
+      const childMessage = this.messages.get(child);
+      if (!childMessage)
+        throw new Error(
+          "MessageRepository(deleteMessage): Child message not found. This is likely an internal bug in assistant-ui.",
+        );
+      this.performOp(replacement, childMessage, "relink");
+    }
+
+    this.performOp(null, message, "cut");
+    this.messages.delete(messageId);
+
+    if (this.head === message) {
+      this.head = findHead(replacement ?? this.root);
+    }
+  }
+
+  getBranches(messageId: string) {
+    const message = this.messages.get(messageId);
+    if (!message)
+      throw new Error(
+        "MessageRepository(getBranches): Message not found. This is likely an internal bug in assistant-ui.",
+      );
+
+    const { children } = message.prev ?? this.root;
+    return children;
+  }
+
+  switchToBranch(messageId: string) {
+    const message = this.messages.get(messageId);
+    if (!message)
+      throw new Error(
+        "MessageRepository(switchToBranch): Branch not found. This is likely an internal bug in assistant-ui.",
+      );
+
+    const prevOrRoot = message.prev ?? this.root;
+    prevOrRoot.next = message;
+
+    this.head = findHead(message);
+  }
+
+  resetHead(messageId: string | null) {
+    if (messageId === null) {
+      this.head = null;
+      return;
+    }
+
+    const message = this.messages.get(messageId);
+    if (!message)
+      throw new Error(
+        "MessageRepository(resetHead): Branch not found. This is likely an internal bug in assistant-ui.",
+      );
+
+    this.head = message;
+    for (
+      let current: RepositoryMessage | null = message;
+      current;
+      current = current.prev
+    ) {
+      if (current.prev) {
+        current.prev.next = current;
+      }
+    }
+  }
+
+  export(): ExportedMessageRepository {
+    const exportItems: ExportedMessageRepository["messages"] = [];
+
+    // hint: we are relying on the insertion order of the messages
+    // this is important for the import function to properly link the messages
+    for (const [, message] of this.messages) {
+      exportItems.push({
+        message: message.current,
+        parentId: message.prev?.current.id ?? null,
+      });
+    }
+
+    return {
+      headId: this.head?.current.id ?? null,
+      messages: exportItems,
+    };
+  }
+
+  import({ headId, messages }: ExportedMessageRepository) {
+    for (const { message, parentId } of messages) {
+      this.addOrUpdateMessage(parentId, message);
+    }
+
+    // switch to the saved head id if it is not the most recent message
+    this.resetHead(headId ?? messages.at(-1)?.message.id ?? null);
+  }
+}

package/src/styles/base.css

@@ -0,0 +1,37 @@
+:where(.aui-root) {
+  @tailwind base;
+}
+
+@keyframes aui-enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(
+        var(--tw-enter-translate-x, 0),
+        var(--tw-enter-translate-y, 0),
+        0
+      )
+      scale3d(
+        var(--tw-enter-scale, 1),
+        var(--tw-enter-scale, 1),
+        var(--tw-enter-scale, 1)
+      )
+      rotate(var(--tw-enter-rotate, 0));
+  }
+}
+
+@keyframes aui-exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(
+        var(--tw-exit-translate-x, 0),
+        var(--tw-exit-translate-y, 0),
+        0
+      )
+      scale3d(
+        var(--tw-exit-scale, 1),
+        var(--tw-exit-scale, 1),
+        var(--tw-exit-scale, 1)
+      )
+      rotate(var(--tw-exit-rotate, 0));
+  }
+}

package/src/styles/index.css

@@ -0,0 +1,4 @@
+@import "./base.css";
+@import "./tailwindcss/base-components.css";
+@import "./tailwindcss/thread.css";
+@import "./themes/default.css";

package/src/styles/modal.css

@@ -0,0 +1 @@
+@import "./tailwindcss/modal.css";

package/src/styles/tailwindcss/base-components.css

@@ -0,0 +1,69 @@
+.aui-root {
+  @apply text-aui-foreground;
+}
+
+.aui-root * {
+  @apply border-aui-border;
+}
+
+/* shadcn-ui/button */
+.aui-button {
+  @apply focus-visible:ring-aui-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50;
+}
+
+.aui-button-primary {
+  @apply bg-aui-primary text-aui-primary-foreground hover:bg-aui-primary/90 shadow;
+}
+
+.aui-button-outline {
+  @apply border-aui-input bg-aui-background hover:bg-aui-accent hover:text-aui-accent-foreground border shadow-sm;
+}
+
+.aui-button-ghost {
+  @apply hover:bg-aui-accent hover:text-aui-accent-foreground;
+}
+
+.aui-button-medium {
+  @apply h-9 px-4 py-2;
+}
+
+/** tooltip icon button */
+.aui-button-icon {
+  @apply size-6 p-1;
+}
+
+.aui-sr-only {
+  @apply sr-only;
+}
+
+/* shadcn-ui/avatar */
+
+.aui-avatar-root {
+  @apply relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full;
+}
+
+.aui-avatar-image {
+  @apply aspect-square h-full w-full object-cover;
+}
+
+.aui-avatar-fallback {
+  @apply bg-aui-muted flex h-full w-full items-center justify-center rounded-full;
+}
+
+/* shadcn-ui/tooltip */
+
+.aui-tooltip-content {
+  @apply bg-aui-popover text-aui-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md;
+}
+
+/* shadcn-ui/dialog */
+
+.aui-dialog-overlay {
+  @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80;
+}
+
+.aui-dialog-content {
+  @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50;
+  @apply grid translate-x-[-50%] translate-y-[-50%] shadow-lg duration-200;
+  /* @apply w-full bg-background max-w-lg gap-4 border p-6 sm:rounded-lg; */
+}

package/src/styles/tailwindcss/modal.css

@@ -0,0 +1,29 @@
+.aui-modal-content {
+  @apply bg-aui-popover text-aui-popover-foreground z-50 h-[500px] w-[400px] overflow-clip rounded-xl border p-0 shadow-md outline-none;
+  @apply [&>.aui-thread-root]:bg-inherit;
+
+  @apply data-[state=closed]:animate-out data-[state=open]:animate-in;
+  @apply data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+  @apply data-[state=closed]:zoom-out data-[state=open]:zoom-in;
+  @apply data-[state=open]:slide-in-from-bottom-1/2 data-[state=open]:slide-in-from-right-1/2 data-[state=closed]:slide-out-to-bottom-1/2 data-[state=closed]:slide-out-to-right-1/2;
+}
+
+.aui-modal-anchor {
+  @apply fixed bottom-4 right-4 size-11;
+}
+
+.aui-modal-button {
+  @apply size-full rounded-full shadow transition-transform hover:scale-110 active:scale-90;
+}
+
+.aui-modal-button-closed-icon {
+  @apply absolute size-6 transition-all;
+  @apply data-[state=closed]:rotate-0 data-[state=open]:rotate-90;
+  @apply data-[state=closed]:scale-100 data-[state=open]:scale-0;
+}
+
+.aui-modal-button-open-icon {
+  @apply absolute size-6 transition-all;
+  @apply data-[state=closed]:-rotate-90 data-[state=open]:rotate-0;
+  @apply data-[state=closed]:scale-0 data-[state=open]:scale-100;
+}

package/src/styles/tailwindcss/thread.css

@@ -0,0 +1,221 @@
+/* thread */
+.aui-thread-root {
+  @apply bg-aui-background box-border h-full;
+  @apply [&>.aui-thread-viewport]:bg-inherit;
+}
+
+.aui-thread-viewport {
+  @apply bg-aui-background flex h-full flex-col items-center overflow-y-scroll scroll-smooth px-4 pt-8;
+}
+
+.aui-thread-viewport-footer {
+  @apply sticky bottom-0 mt-3 flex w-full max-w-2xl flex-col items-center justify-end rounded-t-lg bg-inherit pb-4;
+}
+
+.aui-thread-scroll-to-bottom {
+  @apply absolute -top-8 rounded-full disabled:invisible;
+}
+
+.aui-thread-followup-suggestions {
+  @apply flex min-h-8 items-center justify-center gap-2;
+}
+
+.aui-thread-followup-suggestion {
+  @apply bg-aui-background hover:bg-aui-muted/80 rounded-full border px-3 py-1 text-sm transition-colors ease-in;
+}
+
+/* thread welcome */
+
+.aui-thread-welcome-root {
+  @apply flex w-full max-w-2xl flex-grow flex-col;
+}
+
+.aui-thread-welcome-center {
+  @apply flex w-full flex-grow flex-col items-center justify-center;
+}
+
+.aui-thread-welcome-message {
+  @apply mt-4 font-medium;
+}
+
+.aui-thread-welcome-suggestion-container {
+  @apply mt-3 flex w-full items-stretch justify-center gap-4;
+}
+
+.aui-thread-welcome-suggestion {
+  @apply hover:bg-aui-muted/80 flex max-w-sm grow basis-0 flex-col items-center justify-center rounded-lg border p-3 transition-colors ease-in;
+}
+
+.aui-thread-welcome-suggestion-text {
+  @apply line-clamp-2 text-ellipsis text-sm font-semibold;
+}
+
+/* thread composer */
+
+.aui-composer-root {
+  @apply focus-within:border-aui-ring/20 flex w-full flex-wrap items-end rounded-lg border bg-inherit px-2.5 shadow-sm transition-colors ease-in;
+}
+
+.aui-composer-input {
+  @apply placeholder:text-aui-muted-foreground max-h-40 flex-grow resize-none border-none bg-transparent px-2 py-4 text-sm outline-none focus:ring-0 disabled:cursor-not-allowed;
+}
+
+.aui-composer-send,
+.aui-composer-cancel,
+.aui-composer-attach {
+  @apply my-2.5 size-8 p-2 transition-opacity ease-in;
+}
+
+.aui-composer-attachments {
+  @apply flex w-full flex-row gap-3 px-10;
+}
+
+/* attachment */
+
+.aui-attachment-root {
+  @apply relative mt-3 flex h-12 w-40 items-center justify-center gap-2 rounded-lg border p-1;
+}
+
+.aui-attachment-preview-trigger {
+  @apply hover:bg-aui-accent/50 cursor-pointer transition-colors;
+}
+
+.aui-attachment-thumb {
+  @apply bg-aui-muted flex size-10 items-center justify-center rounded border text-sm;
+}
+
+.aui-attachment-text {
+  @apply flex-grow basis-0;
+}
+
+.aui-attachment-name {
+  @apply text-aui-muted-foreground line-clamp-1 text-ellipsis text-xs font-bold;
+}
+
+.aui-attachment-type {
+  @apply text-aui-muted-foreground text-xs;
+}
+
+.aui-attachment-remove {
+  @apply text-aui-muted-foreground [&>svg]:bg-aui-background absolute -right-3 -top-3 size-6 [&>svg]:size-4 [&>svg]:rounded-full;
+}
+
+/* user message */
+
+.aui-user-message-root {
+  @apply grid auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 [&>*]:col-start-2;
+  @apply w-full max-w-2xl py-4;
+}
+
+:where(.aui-user-message-root) > .aui-user-action-bar-root {
+  @apply col-start-1 row-start-2 mr-3 mt-2.5;
+}
+
+:where(.aui-user-message-root) > .aui-user-message-attachments {
+  @apply col-span-full col-start-1 row-start-1;
+  @apply justify-end;
+}
+
+:where(.aui-user-message-root) > .aui-user-message-content {
+  @apply col-start-2 row-start-2;
+}
+
+:where(.aui-user-message-root) > .aui-branch-picker-root {
+  @apply col-span-full col-start-1 row-start-3;
+  @apply -mr-1 justify-end;
+}
+
+.aui-user-message-content {
+  @apply bg-aui-muted text-aui-foreground max-w-xl break-words rounded-3xl px-5 py-2.5;
+}
+
+.aui-user-message-attachments {
+  @apply flex w-full flex-row gap-3;
+}
+
+/* user action bar */
+
+.aui-user-action-bar-root {
+  @apply flex flex-col items-end;
+}
+
+/* edit composer */
+
+.aui-edit-composer-root {
+  @apply bg-aui-muted my-4 flex w-full max-w-2xl flex-col gap-2 rounded-xl;
+}
+
+.aui-edit-composer-input {
+  @apply text-aui-foreground flex h-8 w-full resize-none bg-transparent p-4 pb-0 outline-none;
+}
+
+.aui-edit-composer-footer {
+  @apply mx-3 mb-3 flex items-center justify-center gap-2 self-end;
+}
+
+/* assistant message */
+
+.aui-assistant-message-root {
+  @apply grid grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr];
+  @apply relative w-full max-w-2xl py-4;
+}
+
+:where(.aui-assistant-message-root) > .aui-avatar-root {
+  @apply col-start-1 row-span-full row-start-1 mr-4;
+}
+
+:where(.aui-assistant-message-root) > .aui-branch-picker-root {
+  @apply col-start-2 row-start-2;
+  @apply -ml-2 mr-2;
+}
+
+:where(.aui-assistant-message-root) > .aui-assistant-action-bar-root {
+  @apply col-start-3 row-start-2;
+  @apply -ml-1;
+}
+
+:where(.aui-assistant-message-root) > .aui-assistant-message-content {
+  @apply col-span-2 col-start-2 row-start-1 my-1.5;
+}
+
+.aui-assistant-message-content {
+  @apply text-aui-foreground max-w-xl break-words leading-7;
+}
+
+/* assistant action bar */
+
+.aui-assistant-action-bar-root {
+  @apply text-aui-muted-foreground flex gap-1;
+}
+
+:where(.aui-assistant-action-bar-root)[data-floating] {
+  @apply bg-aui-background absolute rounded-md border p-1 shadow-sm;
+}
+
+:where(.aui-assistant-action-bar-feedback-positive)[data-submitted] {
+  @apply text-green-600 hover:text-green-700 dark:text-green-500 dark:hover:text-green-400;
+}
+
+:where(.aui-assistant-action-bar-feedback-negative)[data-submitted] {
+  @apply text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-400;
+}
+
+/* branch picker */
+
+.aui-branch-picker-root {
+  @apply text-aui-muted-foreground inline-flex items-center text-xs;
+}
+
+.aui-branch-picker-state {
+  @apply font-medium;
+}
+
+/* text */
+
+.aui-text {
+  @apply whitespace-pre-line;
+}
+
+.aui-text-running::after {
+  @apply animate-pulse font-sans content-['\25CF'] ltr:ml-1 rtl:mr-1;
+}

package/src/styles/themes/default.css

@@ -0,0 +1,61 @@
+:root {
+  --aui-background: 0 0% 100%;
+  --aui-foreground: 240 10% 3.9%;
+
+  --aui-card: 0 0% 100%;
+  --aui-card-foreground: 240 10% 3.9%;
+
+  --aui-popover: 0 0% 100%;
+  --aui-popover-foreground: 240 10% 3.9%;
+
+  --aui-primary: 240 5.9% 10%;
+  --aui-primary-foreground: 0 0% 98%;
+
+  --aui-secondary: 240 4.8% 95.9%;
+  --aui-secondary-foreground: 240 5.9% 10%;
+
+  --aui-muted: 240 4.8% 95.9%;
+  --aui-muted-foreground: 240 3.8% 46.1%;
+
+  --aui-accent: 240 4.8% 95.9%;
+  --aui-accent-foreground: 240 5.9% 10%;
+
+  --aui-destructive: 0 84.2% 60.2%;
+  --aui-destructive-foreground: 0 0% 98%;
+
+  --aui-border: 240 5.9% 90%;
+  --aui-input: 240 5.9% 90%;
+  --aui-ring: 240 10% 3.9%;
+
+  --aui-radius: 0.5rem;
+}
+
+.dark {
+  --aui-background: 0 0% 7%;
+  --aui-foreground: 0 0% 98%;
+
+  --aui-card: 240 10% 3.9%;
+  --aui-card-foreground: 0 0% 98%;
+
+  --aui-popover: 240 10% 3.9%;
+  --aui-popover-foreground: 0 0% 98%;
+
+  --aui-primary: 0 0% 98%;
+  --aui-primary-foreground: 240 5.9% 10%;
+
+  --aui-secondary: 240 3.7% 15.9%;
+  --aui-secondary-foreground: 0 0% 98%;
+
+  --aui-muted: 240 3.7% 15.9%;
+  --aui-muted-foreground: 240 5% 64.9%;
+
+  --aui-accent: 240 3.7% 15.9%;
+  --aui-accent-foreground: 0 0% 98%;
+
+  --aui-destructive: 0 62.8% 30.6%;
+  --aui-destructive-foreground: 0 0% 98%;
+
+  --aui-border: 240 3.7% 15.9%;
+  --aui-input: 240 3.7% 15.9%;
+  --aui-ring: 240 4.9% 83.9%;
+}