@ulearning/ai-sdk 0.0.0-stage → 1.0.0-next.0

package/src/primitives/actionBar/ActionBarCopy.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { computed, defineComponent, h } from "vue";
+import { useForwardExpose } from "reka-ui";
+import {
+  createActionButton,
+  type ActionButtonElement,
+  type ActionButtonProps,
+} from "../../utils/createActionButton";
+import { useActionBarCopy } from "@ulearning/ai-core/vue";
+import { useAuiState } from "@ulearning/ai-store";
+
+/**
+ * Hook that provides copy functionality for action bar buttons.
+ *
+ * This hook returns a callback function that copies message content to the clipboard,
+ * or null if copying is not available. It handles both regular message content and
+ * composer text when in editing mode.
+ *
+ * @param options Configuration options
+ * @param options.copiedDuration Duration in milliseconds to show the copied state
+ * @returns A copy callback function, or null if copying is disabled
+ *
+ * @example
+ * ```tsx
+ * function CustomCopyButton() {
+ *   const copy = useActionBarPrimitiveCopy({ copiedDuration: 2000 });
+ *
+ *   return (
+ *     <button onClick={copy} disabled={!copy}>
+ *       {copy ? "Copy" : "Cannot Copy"}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+const useActionBarPrimitiveCopy = (
+  options: {
+    copiedDuration?: number | undefined;
+  } = {},
+) => {
+  const { copy, disabled } = useActionBarCopy(() => ({
+    copiedDuration: options.copiedDuration,
+    copyToClipboard: (text) => {
+      if (typeof navigator === "undefined" || !navigator.clipboard) {
+        return Promise.reject(new Error("Clipboard API is unavailable"));
+      }
+      return navigator.clipboard.writeText(text);
+    },
+  }));
+  return computed(() => (disabled.value ? null : copy));
+};
+
+export namespace ActionBarPrimitiveCopy {
+  export type Element = ActionButtonElement;
+  /**
+   * Props for the ActionBarPrimitive.Copy component.
+   * Inherits all button element props and action button functionality.
+   */
+  export type Props = ActionButtonProps<typeof useActionBarPrimitiveCopy>;
+}
+
+/**
+ * A button component that copies message content to the clipboard.
+ *
+ * This component automatically handles copying message text to the clipboard
+ * and provides visual feedback through the data-copied attribute. It's disabled
+ * when there's no copyable content available.
+ *
+ * @example
+ * ```tsx
+ * <ActionBarPrimitive.Copy copiedDuration={2000}>
+ *   Copy Message
+ * </ActionBarPrimitive.Copy>
+ * ```
+ */
+const CopyButton = createActionButton(
+  "ActionBarPrimitive.Copy.Button",
+  useActionBarPrimitiveCopy,
+  ["copiedDuration"],
+);
+
+export const ActionBarPrimitiveCopy =
+  defineComponent<ActionBarPrimitiveCopy.Props>(
+    (_props, { attrs, slots }) => {
+      const { forwardRef } = useForwardExpose();
+      const isCopied = useAuiState((s) => s.message.isCopied);
+      return () =>
+        h(
+          CopyButton,
+          {
+            "data-copied": isCopied.value ? "true" : undefined,
+            ...attrs,
+            ref: forwardRef,
+          },
+          slots,
+        );
+    },
+    { name: "ActionBarPrimitive.Copy", inheritAttrs: false },
+  );

package/src/primitives/actionBar/ActionBarEdit.ts

@@ -0,0 +1,63 @@
+"use client";
+
+import { computed } from "vue";
+
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { useActionBarEdit as useActionBarEditBehavior } from "@ulearning/ai-core/vue";
+
+/**
+ * Hook that provides edit functionality for action bar buttons.
+ *
+ * This hook returns a callback function that starts editing the current message,
+ * or null if editing is not available (e.g., already in editing mode).
+ *
+ * @returns An edit callback function, or null if editing is disabled
+ *
+ * @example
+ * ```tsx
+ * function CustomEditButton() {
+ *   const edit = useActionBarEdit();
+ *
+ *   return (
+ *     <button onClick={edit} disabled={!edit}>
+ *       {edit ? "Edit Message" : "Cannot Edit"}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+const useActionBarEdit = () => {
+  const { disabled, edit } = useActionBarEditBehavior();
+  return computed(() => (disabled.value ? null : edit));
+};
+
+export namespace ActionBarPrimitiveEdit {
+  export type Element = ActionButtonElement;
+  /**
+   * Props for the ActionBarPrimitive.Edit component.
+   * Inherits all button element props and action button functionality.
+   */
+  export type Props = ActionButtonProps<typeof useActionBarEdit>;
+}
+
+/**
+ * A button component that starts editing the current message.
+ *
+ * This component automatically handles starting the edit mode for the current message
+ * and is disabled when editing is not available (e.g., already in editing mode).
+ *
+ * @example
+ * ```tsx
+ * <ActionBarPrimitive.Edit>
+ *   Edit Message
+ * </ActionBarPrimitive.Edit>
+ * ```
+ */
+export const ActionBarPrimitiveEdit = createActionButton(
+  "ActionBarPrimitive.Edit",
+  useActionBarEdit,
+);

package/src/primitives/actionBar/ActionBarExportMarkdown.test.tsx

@@ -0,0 +1,83 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { h } from "vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup } from "../../tests/vue";
+import { mountMessageAction } from "../../tests/messageAction";
+import { ActionBarPrimitiveExportMarkdown } from "./ActionBarExportMarkdown";
+
+describe("ActionBarPrimitiveExportMarkdown", () => {
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  it("downloads the message as Markdown through an attached anchor", async () => {
+    const createObjectURL = vi
+      .spyOn(URL, "createObjectURL")
+      .mockReturnValue("blob:export");
+    vi.spyOn(URL, "revokeObjectURL").mockImplementation(() => {});
+    const downloads: {
+      isConnected: boolean;
+      href: string;
+      download: string;
+    }[] = [];
+    vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(function (
+      this: HTMLAnchorElement,
+    ) {
+      downloads.push({
+        isConnected: this.isConnected,
+        href: this.href,
+        download: this.download,
+      });
+    });
+
+    const { container } = mountMessageAction(() =>
+      h(
+        ActionBarPrimitiveExportMarkdown,
+        { filename: "message.md" },
+        { default: () => "Export" },
+      ),
+    );
+    container.querySelector("button")!.click();
+
+    expect(createObjectURL).toHaveBeenCalledOnce();
+    const blob = createObjectURL.mock.calls[0]![0] as Blob;
+    expect(blob.type).toBe("text/markdown");
+    const content = await new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = () => reject(reader.error);
+      reader.readAsText(blob);
+    });
+    expect(content).toBe("# Exported message");
+    // Firefox ignores a programmatic click on a detached anchor.
+    expect(downloads).toEqual([
+      { isConnected: true, href: "blob:export", download: "message.md" },
+    ]);
+    expect(document.querySelector('a[download="message.md"]')).toBeNull();
+  });
+
+  it("handles rejected asynchronous exports", async () => {
+    const error = new Error("remote save failed");
+    const onExport = vi.fn().mockRejectedValue(error);
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    const { container } = mountMessageAction(() =>
+      h(
+        ActionBarPrimitiveExportMarkdown,
+        { onExport },
+        { default: () => "Export" },
+      ),
+    );
+    container.querySelector("button")!.click();
+    await vi.waitFor(() => expect(errorSpy).toHaveBeenCalled());
+
+    expect(onExport).toHaveBeenCalledWith("# Exported message");
+    expect(errorSpy).toHaveBeenCalledWith(
+      "[assistant-ui] markdown export failed:",
+      error,
+    );
+  });
+});

package/src/primitives/actionBar/ActionBarExportMarkdown.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { computed } from "vue";
+import {
+  createActionButton,
+  type ActionButtonElement,
+  type ActionButtonProps,
+} from "../../utils/createActionButton";
+import { useAuiState, useAui } from "@ulearning/ai-store";
+
+const useActionBarExportMarkdown = (
+  options: {
+    filename?: string | undefined;
+    onExport?: ((content: string) => void | Promise<void>) | undefined;
+  } = {},
+) => {
+  const aui = useAui();
+  const hasExportableContent = useAuiState((s) => {
+    return (
+      (s.message.role !== "assistant" ||
+        s.message.status?.type !== "running") &&
+      s.message.parts.some((c) => c.type === "text" && c.text.length > 0)
+    );
+  });
+
+  const callback = async () => {
+    const content = aui.message.getCopyText();
+    if (!content) return;
+
+    if (options.onExport) {
+      await options.onExport(content);
+      return;
+    }
+
+    const blob = new Blob([content], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = options.filename ?? `message-${Date.now()}.md`;
+    a.rel = "noopener";
+    // Firefox starts a download only for an anchor that is in the document.
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    setTimeout(() => URL.revokeObjectURL(url), 40_000);
+  };
+
+  const invoke = () => {
+    void callback().catch((error: unknown) => {
+      console.error("[assistant-ui] markdown export failed:", error);
+    });
+  };
+  return computed(() => (hasExportableContent.value ? invoke : null));
+};
+
+export namespace ActionBarPrimitiveExportMarkdown {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useActionBarExportMarkdown>;
+}
+
+export const ActionBarPrimitiveExportMarkdown = createActionButton(
+  "ActionBarPrimitive.ExportMarkdown",
+  useActionBarExportMarkdown,
+  ["filename", "onExport"],
+);

package/src/primitives/actionBar/ActionBarFeedback.test.tsx

@@ -0,0 +1,59 @@
+/** @vitest-environment jsdom */
+import { h } from "vue";
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup } from "../../tests/vue";
+import { mountMessageAction } from "../../tests/messageAction";
+import { ActionBarPrimitiveFeedbackNegative } from "./ActionBarFeedbackNegative";
+import { ActionBarPrimitiveFeedbackPositive } from "./ActionBarFeedbackPositive";
+
+afterEach(cleanup);
+
+describe("ActionBar feedback primitives", () => {
+  it.each([
+    [undefined, "false", "false"],
+    [{ type: "positive" as const }, "true", "false"],
+    [{ type: "negative" as const }, "false", "true"],
+  ])(
+    "exposes the submitted state for %s",
+    (submittedFeedback, positivePressed, negativePressed) => {
+      const { container } = mountMessageAction(
+        () =>
+          h("div", [
+            h(ActionBarPrimitiveFeedbackPositive, { "aria-label": "Helpful" }),
+            h(ActionBarPrimitiveFeedbackNegative, {
+              "aria-label": "Not helpful",
+            }),
+          ]),
+        { metadata: { submittedFeedback } },
+      );
+
+      const [positive, negative] = Array.from(
+        container.querySelectorAll("button"),
+      );
+      expect(positive?.getAttribute("aria-pressed")).toBe(positivePressed);
+      expect(negative?.getAttribute("aria-pressed")).toBe(negativePressed);
+      expect(positive?.hasAttribute("data-submitted")).toBe(
+        positivePressed === "true",
+      );
+      expect(negative?.hasAttribute("data-submitted")).toBe(
+        negativePressed === "true",
+      );
+    },
+  );
+
+  it("forwards the submitted state through asChild", () => {
+    const { container } = mountMessageAction(
+      () =>
+        h(
+          ActionBarPrimitiveFeedbackPositive,
+          { asChild: true },
+          { default: () => h("button", { type: "button" }, "Helpful") },
+        ),
+      { metadata: { submittedFeedback: { type: "positive" } } },
+    );
+
+    expect(
+      container.querySelector("button")?.getAttribute("aria-pressed"),
+    ).toBe("true");
+  });
+});

package/src/primitives/actionBar/ActionBarFeedbackNegative.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { defineComponent, h } from "vue";
+import { useForwardExpose } from "reka-ui";
+import {
+  createActionButton,
+  type ActionButtonElement,
+  type ActionButtonProps,
+} from "../../utils/createActionButton";
+import { useAuiState } from "@ulearning/ai-store";
+import { useActionBarFeedbackNegative as useActionBarFeedbackNegativeBehavior } from "@ulearning/ai-core/vue";
+
+const useActionBarFeedbackNegative = () => {
+  const { submit } = useActionBarFeedbackNegativeBehavior();
+  return submit;
+};
+
+export namespace ActionBarPrimitiveFeedbackNegative {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useActionBarFeedbackNegative>;
+}
+
+const FeedbackButton = createActionButton(
+  "ActionBarPrimitive.FeedbackNegative.Button",
+  useActionBarFeedbackNegative,
+);
+
+export const ActionBarPrimitiveFeedbackNegative =
+  defineComponent<ActionBarPrimitiveFeedbackNegative.Props>(
+    (_props, { attrs, slots }) => {
+      const { forwardRef } = useForwardExpose();
+      const isSubmitted = useAuiState(
+        (s) => s.message.metadata.submittedFeedback?.type === "negative",
+      );
+      return () =>
+        h(
+          FeedbackButton,
+          {
+            "aria-pressed": isSubmitted.value,
+            "data-submitted": isSubmitted.value ? "true" : undefined,
+            ...attrs,
+            ref: forwardRef,
+          },
+          slots,
+        );
+    },
+    { name: "ActionBarPrimitive.FeedbackNegative", inheritAttrs: false },
+  );

package/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { defineComponent, h } from "vue";
+import { useForwardExpose } from "reka-ui";
+import {
+  createActionButton,
+  type ActionButtonElement,
+  type ActionButtonProps,
+} from "../../utils/createActionButton";
+import { useAuiState } from "@ulearning/ai-store";
+import { useActionBarFeedbackPositive as useActionBarFeedbackPositiveBehavior } from "@ulearning/ai-core/vue";
+
+const useActionBarFeedbackPositive = () => {
+  const { submit } = useActionBarFeedbackPositiveBehavior();
+  return submit;
+};
+
+export namespace ActionBarPrimitiveFeedbackPositive {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useActionBarFeedbackPositive>;
+}
+
+const FeedbackButton = createActionButton(
+  "ActionBarPrimitive.FeedbackPositive.Button",
+  useActionBarFeedbackPositive,
+);
+
+export const ActionBarPrimitiveFeedbackPositive =
+  defineComponent<ActionBarPrimitiveFeedbackPositive.Props>(
+    (_props, { attrs, slots }) => {
+      const { forwardRef } = useForwardExpose();
+      const isSubmitted = useAuiState(
+        (s) => s.message.metadata.submittedFeedback?.type === "positive",
+      );
+      return () =>
+        h(
+          FeedbackButton,
+          {
+            "aria-pressed": isSubmitted.value,
+            "data-submitted": isSubmitted.value ? "true" : undefined,
+            ...attrs,
+            ref: forwardRef,
+          },
+          slots,
+        );
+    },
+    { name: "ActionBarPrimitive.FeedbackPositive", inheritAttrs: false },
+  );

package/src/primitives/actionBar/ActionBarInteractionContext.ts

@@ -0,0 +1,13 @@
+"use client";
+
+import { inject, type InjectionKey } from "vue";
+
+export type ActionBarInteractionContextValue = {
+  acquireInteractionLock: () => () => void;
+};
+
+export const ActionBarInteractionContext: InjectionKey<ActionBarInteractionContextValue | null> =
+  Symbol("aui.ActionBarInteraction");
+
+export const useActionBarInteractionContext = () =>
+  inject(ActionBarInteractionContext, null);

package/src/primitives/actionBar/ActionBarReload.ts

@@ -0,0 +1,64 @@
+"use client";
+
+import { computed } from "vue";
+
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { useActionBarReload as useActionBarReloadBehavior } from "@ulearning/ai-core/vue";
+
+/**
+ * Hook that provides reload functionality for action bar buttons.
+ *
+ * This hook returns a callback function that reloads/regenerates the current assistant message,
+ * or null if reloading is not available (e.g., thread is running, disabled, or message is not from assistant).
+ *
+ * @returns A reload callback function, or null if reloading is disabled
+ *
+ * @example
+ * ```tsx
+ * function CustomReloadButton() {
+ *   const reload = useActionBarReload();
+ *
+ *   return (
+ *     <button onClick={reload} disabled={!reload}>
+ *       {reload ? "Reload Message" : "Cannot Reload"}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+const useActionBarReload = () => {
+  const { disabled, reload } = useActionBarReloadBehavior();
+  return computed(() => (disabled.value ? null : reload));
+};
+
+export namespace ActionBarPrimitiveReload {
+  export type Element = ActionButtonElement;
+  /**
+   * Props for the ActionBarPrimitive.Reload component.
+   * Inherits all button element props and action button functionality.
+   */
+  export type Props = ActionButtonProps<typeof useActionBarReload>;
+}
+
+/**
+ * A button component that reloads/regenerates the current assistant message.
+ *
+ * This component automatically handles reloading the current assistant message
+ * and is disabled when reloading is not available (e.g., thread is running,
+ * disabled, or message is not from assistant).
+ *
+ * @example
+ * ```tsx
+ * <ActionBarPrimitive.Reload>
+ *   Reload Message
+ * </ActionBarPrimitive.Reload>
+ * ```
+ */
+export const ActionBarPrimitiveReload = createActionButton(
+  "ActionBarPrimitive.Reload",
+  useActionBarReload,
+);

package/src/primitives/actionBar/ActionBarRoot.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { Primitive, type PrimitiveProps } from "../../utils/Primitive";
+import {
+  defineComponent,
+  h,
+  provide,
+  shallowRef,
+  type ComponentPublicInstance,
+} from "vue";
+import { useForwardExpose } from "reka-ui";
+import {
+  useActionBarFloatStatus,
+  HideAndFloatStatus,
+} from "./useActionBarFloatStatus";
+import { ActionBarInteractionContext } from "./ActionBarInteractionContext";
+
+type PrimitiveDivProps = PrimitiveProps<"div">;
+
+export namespace ActionBarPrimitiveRoot {
+  export type Element = ComponentPublicInstance;
+  export type Props = PrimitiveDivProps & {
+    /**
+     * Whether to hide the action bar when the thread is running.
+     * @default false
+     */
+    hideWhenRunning?: boolean | undefined;
+    /**
+     * Controls when the action bar should automatically hide.
+     * - "always": Always hide unless hovered
+     * - "not-last": Hide unless this is the last message
+     * - "never": Never auto-hide
+     * @default "never"
+     */
+    autohide?: "always" | "not-last" | "never" | undefined;
+    /**
+     * Controls floating behavior when auto-hidden.
+     * - "always": Always float when hidden
+     * - "single-branch": Float only for single-branch messages
+     * - "never": Never float
+     * @default "never"
+     */
+    autohideFloat?: "always" | "single-branch" | "never" | undefined;
+  };
+}
+
+/**
+ * The root container for action bar components.
+ *
+ * This component provides intelligent visibility and floating behavior for action bars,
+ * automatically hiding and showing based on message state, hover status, and configuration.
+ * It supports floating mode for better UX when space is limited.
+ *
+ * @example
+ * ```tsx
+ * <ActionBarPrimitive.Root
+ *   hideWhenRunning={true}
+ *   autohide="not-last"
+ *   autohideFloat="single-branch"
+ * >
+ *   <ActionBarPrimitive.Copy />
+ *   <ActionBarPrimitive.Edit />
+ *   <ActionBarPrimitive.Reload />
+ * </ActionBarPrimitive.Root>
+ * ```
+ */
+export const ActionBarPrimitiveRoot =
+  defineComponent<ActionBarPrimitiveRoot.Props>(
+    (props, { attrs, slots }) => {
+      const { forwardRef } = useForwardExpose();
+      const interactionCount = shallowRef(0);
+      const acquireInteractionLock = () => {
+        let released = false;
+        interactionCount.value++;
+        return () => {
+          if (released) return;
+          released = true;
+          interactionCount.value = Math.max(0, interactionCount.value - 1);
+        };
+      };
+      provide(ActionBarInteractionContext, { acquireInteractionLock });
+      const status = useActionBarFloatStatus(() => ({
+        hideWhenRunning: props.hideWhenRunning,
+        autohide: props.autohide,
+        autohideFloat: props.autohideFloat,
+        forceVisible: interactionCount.value > 0,
+      }));
+      return () =>
+        status.value === HideAndFloatStatus.Hidden
+          ? null
+          : h(
+              Primitive.div,
+              {
+                "data-floating":
+                  status.value === HideAndFloatStatus.Floating
+                    ? "true"
+                    : undefined,
+                ...attrs,
+                render: props.render,
+                asChild: props.asChild,
+                children: props.children,
+                ref: forwardRef,
+              },
+              slots,
+            );
+    },
+    {
+      name: "ActionBarPrimitive.Root",
+      inheritAttrs: false,
+      props: [
+        "hideWhenRunning",
+        "autohide",
+        "autohideFloat",
+        "render",
+        "asChild",
+        "children",
+      ],
+    },
+  );

package/src/primitives/actionBar/ActionBarSpeak.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import { computed } from "vue";
+
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { useActionBarSpeak as useActionBarSpeakBehavior } from "@ulearning/ai-core/vue";
+
+const useActionBarSpeak = () => {
+  const { disabled, speak } = useActionBarSpeakBehavior();
+  return computed(() => (disabled.value ? null : speak));
+};
+
+export namespace ActionBarPrimitiveSpeak {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useActionBarSpeak>;
+}
+
+export const ActionBarPrimitiveSpeak = createActionButton(
+  "ActionBarPrimitive.Speak",
+  useActionBarSpeak,
+);