@assistant-ui/vue 0.0.0-stage → 0.0.1

package/src/primitives/composerAttachments.ts

@@ -0,0 +1,181 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  ref,
+  watch,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { isAttrDisabled } from "./attrDisabled";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+import { AttachmentByIndexProvider } from "./AttachmentByIndexProvider";
+import { getAttachmentKeys, useStableKeys } from "./stableKeys";
+
+/**
+ * Renders the composer's pending attachments in order, each scoped through
+ * {@link AttachmentByIndexProvider}; the `default` slot renders each
+ * attachment.
+ */
+export const ComposerPrimitiveAttachments = defineComponent({
+  name: "ComposerPrimitiveAttachments",
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { slots }) {
+    const attachments = useAuiState((s) => s.composer.attachments);
+    const attachmentKeys = useStableKeys(() =>
+      getAttachmentKeys(attachments.value),
+    );
+    return () =>
+      attachmentKeys.value.map((key, index) =>
+        h(
+          AttachmentByIndexProvider,
+          { source: "composer", index, key },
+          { default: () => slots.default?.() },
+        ),
+      );
+  },
+});
+
+/**
+ * A button that opens a file picker and adds the selected files to the
+ * composer. Disabled while the composer is not editable. The picker's accept
+ * filter follows the composer's `attachmentAccept`.
+ */
+export const ComposerPrimitiveAddAttachment = defineComponent({
+  name: "ComposerPrimitiveAddAttachment",
+  inheritAttrs: false,
+  props: {
+    multiple: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(props, { attrs, slots }) {
+    const aui = useAui();
+    const disabled = useAuiState((s) => !s.composer.isEditing);
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || disabled.value || isAttrDisabled(attrs))
+        return;
+
+      const input = document.createElement("input");
+      input.type = "file";
+      input.multiple = props.multiple;
+      input.hidden = true;
+
+      const attachmentAccept = aui.composer.getState().attachmentAccept;
+      if (attachmentAccept !== "*") {
+        input.accept = attachmentAccept;
+      }
+
+      document.body.appendChild(input);
+
+      input.onchange = (e) => {
+        const fileList = (e.target as HTMLInputElement).files;
+        if (fileList) {
+          for (const file of Array.from(fileList)) {
+            aui.composer.addAttachment(file).catch(() => {});
+          }
+        }
+        input.remove();
+      };
+      input.oncancel = () => input.remove();
+
+      input.click();
+    };
+    return () =>
+      h(
+        "button",
+        mergeProps(attrs, {
+          type: "button",
+          disabled: disabled.value || isAttrDisabled(attrs),
+          onClick,
+        }),
+        slots.default?.(),
+      );
+  },
+});
+
+/**
+ * A drop target that adds dropped files to the composer. `data-dragging` is
+ * present while a file drag hovers the element. File drags are claimed via
+ * `preventDefault` even when the runtime does not support attachments, since
+ * an unprevented file drop navigates the tab to the file.
+ */
+export const ComposerPrimitiveAttachmentDropzone = defineComponent({
+  name: "ComposerPrimitiveAttachmentDropzone",
+  inheritAttrs: false,
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(props, { attrs, slots }) {
+    const aui = useAui();
+    const isDragging = ref(false);
+
+    watch(
+      () => props.disabled,
+      (disabled) => {
+        if (disabled) isDragging.value = false;
+      },
+    );
+
+    const isFileDrag = (event: DragEvent) =>
+      event.dataTransfer?.types.includes("Files") === true;
+
+    const onDragenterCapture = (event: DragEvent) => {
+      if (props.disabled || !isFileDrag(event)) return;
+      event.preventDefault();
+      if (!aui.thread.getState().capabilities.attachments) {
+        event.dataTransfer!.dropEffect = "none";
+        return;
+      }
+      isDragging.value = true;
+    };
+    const onDragoverCapture = (event: DragEvent) => {
+      if (props.disabled || !isFileDrag(event)) return;
+      event.preventDefault();
+      if (!aui.thread.getState().capabilities.attachments) {
+        event.dataTransfer!.dropEffect = "none";
+        return;
+      }
+      if (!isDragging.value) isDragging.value = true;
+    };
+    const onDragleaveCapture = (event: DragEvent) => {
+      if (props.disabled || !isFileDrag(event)) return;
+      const related = event.relatedTarget as Node | null;
+      if (related && (event.currentTarget as Node).contains(related)) return;
+      isDragging.value = false;
+    };
+    const onDropCapture = (event: DragEvent) => {
+      if (props.disabled) return;
+      isDragging.value = false;
+      if (!isFileDrag(event)) return;
+      event.preventDefault();
+      const files = Array.from(event.dataTransfer?.files ?? []);
+      if (!aui.thread.getState().capabilities.attachments || files.length === 0)
+        return;
+      for (const file of files) {
+        aui.composer.addAttachment(file).catch(() => {});
+      }
+    };
+
+    return () =>
+      h(
+        "div",
+        mergeProps(attrs, {
+          ...(!props.disabled &&
+            isDragging.value && { "data-dragging": "true" }),
+          onDragenterCapture,
+          onDragoverCapture,
+          onDragleaveCapture,
+          onDropCapture,
+        }),
+        slots.default?.(),
+      );
+  },
+});

package/src/primitives/error.ts

@@ -0,0 +1,36 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { messageErrorText } from "@assistant-ui/core/store/internal";
+import { useAuiState } from "../useAuiState";
+
+/** A wrapper element for the current message's error state. */
+export const ErrorPrimitiveRoot = defineComponent({
+  name: "ErrorPrimitiveRoot",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    return () =>
+      h("div", mergeProps({ role: "alert" }, attrs), slots.default?.());
+  },
+});
+
+/**
+ * Renders the current assistant message's error text (raw text, slot
+ * override supported); renders nothing while the message has no error.
+ */
+export const ErrorPrimitiveMessage = defineComponent({
+  name: "ErrorPrimitiveMessage",
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { slots }) {
+    const error = useAuiState(messageErrorText);
+    return () =>
+      error.value === undefined
+        ? null
+        : (slots.default?.() ?? String(error.value));
+  },
+});

package/src/primitives/lastValidCache.ts

@@ -0,0 +1,12 @@
+import { nextTick } from "vue";
+import {
+  createLastValidCache as createNeutralLastValidCache,
+  createStaleReporter,
+} from "@assistant-ui/store/client";
+
+const scheduleExpiry = (callback: () => void) => void nextTick(callback);
+
+export const createLastValidCache = <T>(reportStale: (() => void) | null) =>
+  createNeutralLastValidCache<T>(reportStale, scheduleExpiry);
+
+export { createStaleReporter };

package/src/primitives/message.ts

@@ -0,0 +1,54 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  onScopeDispose,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+
+/**
+ * A wrapper element for one message. Sets `data-message-id` and tracks
+ * pointer hover into `s.message.isHovering`, including an element already
+ * under the pointer when it mounts.
+ */
+export const MessagePrimitiveRoot = defineComponent({
+  name: "MessagePrimitiveRoot",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const aui = useAui();
+    const messageId = useAuiState((s) => s.message.id);
+    const onMouseenter = () => {
+      aui.message.setIsHovering(true);
+    };
+    const onMouseleave = () => {
+      aui.message.setIsHovering(false);
+    };
+    let active = true;
+    onScopeDispose(() => {
+      active = false;
+      onMouseleave();
+    });
+    const hoverRef = (el: unknown) => {
+      if (el instanceof HTMLElement && el.matches(":hover")) {
+        queueMicrotask(() => {
+          if (active) onMouseenter();
+        });
+      }
+    };
+    return () =>
+      h(
+        "div",
+        mergeProps(attrs, {
+          ref: hoverRef,
+          "data-message-id": messageId.value,
+          onMouseenter,
+          onMouseleave,
+        }),
+        slots.default?.(),
+      );
+  },
+});

package/src/primitives/messageAttachments.ts

@@ -0,0 +1,32 @@
+import { defineComponent, h, type SlotsType, type VNodeChild } from "vue";
+import { useAuiState } from "../useAuiState";
+import { AttachmentByIndexProvider } from "./AttachmentByIndexProvider";
+import { getAttachmentKeys, useStableKeys } from "./stableKeys";
+
+/**
+ * Renders the current message's attachments in order, each scoped through
+ * {@link AttachmentByIndexProvider}; the `default` slot renders each
+ * attachment.
+ */
+export const MessagePrimitiveAttachments = defineComponent({
+  name: "MessagePrimitiveAttachments",
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { slots }) {
+    const attachments = useAuiState((s) =>
+      s.message.role === "user"
+        ? (s.message.submission?.attachments ?? s.message.attachments)
+        : undefined,
+    );
+    const attachmentKeys = useStableKeys(() =>
+      getAttachmentKeys(attachments.value ?? []),
+    );
+    return () =>
+      attachmentKeys.value.map((key, index) =>
+        h(
+          AttachmentByIndexProvider,
+          { source: "message", index, key },
+          { default: () => slots.default?.() },
+        ),
+      );
+  },
+});

package/src/primitives/stableKeys.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { getAttachmentKeys } from "./stableKeys";
+
+describe("getAttachmentKeys", () => {
+  it("keys unique attachments by id and repeated ids by position", () => {
+    expect(
+      getAttachmentKeys([{ id: "a" }, { id: "b" }, { id: "a" }, { id: "c" }]),
+    ).toEqual(["attachment@0", "attachment:b", "attachment@2", "attachment:c"]);
+  });
+
+  it("never lets an id collide with a positional key", () => {
+    const keys = getAttachmentKeys([
+      { id: "x" },
+      { id: "x" },
+      { id: "attachment@0" },
+    ]);
+    expect(new Set(keys).size).toBe(keys.length);
+  });
+});

package/src/primitives/stableKeys.ts

@@ -0,0 +1,21 @@
+import { computed } from "vue";
+
+export const useStableKeys = (getKeys: () => string[]) =>
+  computed<string[]>((previous) => {
+    const keys = getKeys();
+    return previous?.length === keys.length &&
+      previous.every((key, index) => key === keys[index])
+      ? previous
+      : keys;
+  });
+
+export const getAttachmentKeys = (
+  attachments: readonly { readonly id: string }[],
+) => {
+  const ids = attachments.map((attachment) => attachment.id);
+  return ids.map((id, index) =>
+    ids.indexOf(id) === ids.lastIndexOf(id)
+      ? `attachment:${id}`
+      : `attachment@${index}`,
+  );
+};

package/src/primitives/suggestions.ts

@@ -0,0 +1,179 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  mergeProps,
+  onScopeDispose,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { AuiConfig, Derived } from "@assistant-ui/store/client";
+import { flushTapSync } from "@assistant-ui/tap";
+import type { SuggestionMethods } from "@assistant-ui/core/store";
+import { getSuggestionKeys } from "@assistant-ui/core/internal";
+import {
+  suggestionSendMode,
+  suggestionTriggerDisabled,
+} from "@assistant-ui/core/store/internal";
+import { AuiProvider } from "../AuiProvider";
+import { isAttrDisabled } from "./attrDisabled";
+import { createLastValidCache, createStaleReporter } from "./lastValidCache";
+import { useStableKeys } from "./stableKeys";
+import { useAui } from "../useAui";
+import { useAuiState } from "../useAuiState";
+
+/**
+ * Scopes the subtree to the suggestion at `index`: descendants read it
+ * through `s.suggestion`.
+ */
+export const SuggestionByIndexProvider = defineComponent({
+  name: "SuggestionByIndexProvider",
+  props: {
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(props, { slots }) {
+    const aui = useAui();
+    let disposed = false;
+    onScopeDispose(() => {
+      disposed = true;
+    });
+    const config = computed(() => {
+      const index = props.index;
+      const cache = createLastValidCache<SuggestionMethods>(
+        createStaleReporter({
+          name: "SuggestionByIndexProvider",
+          index,
+          isCurrent: () => !disposed && index === props.index,
+          isValid: () => index < aui.suggestions.getState().suggestions.length,
+        }),
+      );
+      return AuiConfig({
+        suggestion: Derived({
+          source: "suggestions",
+          query: { index },
+          get: (aui) =>
+            cache.resolve(
+              index < aui.suggestions.getState().suggestions.length,
+              () => aui.suggestions.suggestion({ index }),
+            ),
+        }),
+      });
+    });
+    return () =>
+      h(
+        AuiProvider,
+        { config: config.value, extends: aui },
+        { default: () => slots.default?.() },
+      );
+  },
+});
+
+/**
+ * Renders the default slot once per thread suggestion, each instance scoped
+ * through {@link SuggestionByIndexProvider}.
+ */
+export const ThreadPrimitiveSuggestions = defineComponent({
+  name: "ThreadPrimitiveSuggestions",
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { slots }) {
+    const suggestions = useAuiState((s) => s.suggestions.suggestions);
+    const suggestionKeys = useStableKeys(() =>
+      getSuggestionKeys(suggestions.value),
+    );
+    return () =>
+      suggestionKeys.value.map((key, index) =>
+        h(
+          SuggestionByIndexProvider,
+          { index, key },
+          { default: () => slots.default?.() },
+        ),
+      );
+  },
+});
+
+/**
+ * A button that triggers the current suggestion. With `send`, the prompt is
+ * appended as a message (queued sends never clear a draft the user is still
+ * composing); without it, the prompt replaces the composer text, or is
+ * appended to it when `clearComposer` is false.
+ */
+export const SuggestionPrimitiveTrigger = defineComponent({
+  name: "SuggestionPrimitiveTrigger",
+  inheritAttrs: false,
+  props: {
+    send: {
+      type: Boolean,
+      default: false,
+    },
+    clearComposer: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(props, { attrs, slots }) {
+    const aui = useAui();
+    const prompt = useAuiState((s) => s.suggestion.prompt);
+    const disabled = useAuiState((s) =>
+      suggestionTriggerDisabled(s, props.send),
+    );
+
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || disabled.value || isAttrDisabled(attrs))
+        return;
+      flushTapSync(() => {
+        if (props.send) {
+          const mode = suggestionSendMode(aui.thread.getState());
+          if (mode === "blocked") return;
+          aui.thread.append({
+            content: [{ type: "text", text: prompt.value }],
+            runConfig: aui.composer.getState().runConfig,
+          });
+          if (props.clearComposer && mode === "now") {
+            aui.composer.setText("");
+          }
+        } else if (props.clearComposer) {
+          aui.composer.setText(prompt.value);
+        } else {
+          const currentText = aui.composer.getState().text;
+          aui.composer.setText(
+            [currentText, prompt.value].filter((part) => part.trim()).join(" "),
+          );
+        }
+      });
+    };
+
+    return () =>
+      h(
+        "button",
+        mergeProps(attrs, {
+          type: "button",
+          disabled: disabled.value || isAttrDisabled(attrs),
+          onClick,
+        }),
+        slots.default?.(),
+      );
+  },
+});
+
+/** Renders the current suggestion's title as text. */
+export const SuggestionPrimitiveTitle = defineComponent({
+  name: "SuggestionPrimitiveTitle",
+  setup() {
+    const title = useAuiState((s) => s.suggestion.title);
+    return () => title.value;
+  },
+});
+
+/** Renders the current suggestion's label as text. */
+export const SuggestionPrimitiveDescription = defineComponent({
+  name: "SuggestionPrimitiveDescription",
+  setup() {
+    const label = useAuiState((s) => s.suggestion.label);
+    return () => label.value;
+  },
+});

package/src/primitives/thread.ts

@@ -0,0 +1,46 @@
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  onMounted,
+  onScopeDispose,
+  type SlotsType,
+  type VNodeChild,
+} from "vue";
+import { useAui } from "../useAui";
+
+/**
+ * A wrapper element for the thread. While mounted, Escape stops an active
+ * speech synthesis run.
+ */
+export const ThreadPrimitiveRoot = defineComponent({
+  name: "ThreadPrimitiveRoot",
+  inheritAttrs: false,
+  slots: Object as SlotsType<{ default?: () => VNodeChild[] }>,
+  setup(_, { attrs, slots }) {
+    const aui = useAui();
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      if (aui.thread.source === null) return;
+      if (aui.thread.getState().speech == null) return;
+      event.preventDefault();
+      try {
+        aui.thread.stopSpeaking();
+      } catch (error) {
+        if (
+          !(error instanceof Error) ||
+          error.message !== "No message is being spoken"
+        ) {
+          throw error;
+        }
+      }
+    };
+    onMounted(() => {
+      document.addEventListener("keydown", handleKeyDown);
+    });
+    onScopeDispose(() => {
+      document.removeEventListener("keydown", handleKeyDown);
+    });
+    return () => h("div", mergeProps(attrs, {}), slots.default?.());
+  },
+});