@eslamdevui/ui 3.2.0-beta.1

package/dist/runtime/components/ChatMessages.vue

@@ -0,0 +1,225 @@
+<script>
+import theme from "#build/ui/chat-messages";
+</script>
+
+<script setup>
+import { ref, computed, watch, nextTick, toRef, onMounted } from "vue";
+import { defu } from "defu";
+import { Presence } from "reka-ui";
+import { useElementBounding, useEventListener, watchThrottled } from "@vueuse/core";
+import { omit } from "@eslamdevui/ui/utils";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import UChatMessage from "./ChatMessage.vue";
+const props = defineProps({
+  messages: { type: Array, required: false },
+  status: { type: null, required: false },
+  shouldAutoScroll: { type: Boolean, required: false, default: false },
+  shouldScrollToBottom: { type: Boolean, required: false, default: true },
+  autoScroll: { type: [Boolean, Object], required: false, default: true },
+  autoScrollIcon: { type: String, required: false },
+  user: { type: Object, required: false },
+  assistant: { type: Object, required: false },
+  compact: { type: Boolean, required: false },
+  spacingOffset: { type: Number, required: false, default: 0 },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const proxySlots = omit(slots, ["default", "indicator", "viewport"]);
+const appConfig = useAppConfig();
+function getValidVariant(variant) {
+  const allowed = ["solid", "outline", "soft", "subtle", "naked"];
+  return allowed.includes(variant) ? variant : "soft";
+}
+const userProps = toRef(
+  () => defu(
+    { ...props.user, variant: getValidVariant(props.user?.variant) },
+    { side: "right", variant: "soft" }
+  )
+);
+const assistantProps = toRef(
+  () => defu(
+    { ...props.assistant, variant: getValidVariant(props.assistant?.variant) },
+    { side: "left", variant: "naked" }
+  )
+);
+const ui = computed(
+  () => tv({ extend: tv(theme), ...appConfig.ui?.chatMessages || {} })({
+    compact: props.compact
+  })
+);
+const el = ref();
+const parent = ref();
+const messagesRefs = ref(/* @__PURE__ */ new Map());
+const showAutoScroll = ref(false);
+const lastMessageHeight = ref(0);
+const lastMessageSubmitted = ref(false);
+function registerMessageRef(id, element) {
+  const elInstance = element?.$el;
+  if (elInstance) {
+    messagesRefs.value.set(id, elInstance);
+  }
+}
+function scrollToMessage(id) {
+  const element = messagesRefs.value.get(id);
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+}
+function scrollToBottom(smooth = true) {
+  if (!parent.value) {
+    return;
+  }
+  if (smooth) {
+    parent.value.scrollTo({ top: parent.value.scrollHeight, behavior: "smooth" });
+  } else {
+    parent.value.scrollTop = parent.value.scrollHeight;
+  }
+}
+watchThrottled([() => props.messages, () => props.status], ([_, status]) => {
+  if (status !== "streaming") {
+    return;
+  }
+  if (props.shouldAutoScroll) {
+    requestAnimationFrame(() => nextTick(scrollToBottom));
+  } else {
+    checkScrollPosition();
+  }
+}, { throttle: 100, leading: true });
+watch(() => props.status, (status) => {
+  if (status !== "submitted") {
+    return;
+  }
+  const lastMessage = props.messages?.[props.messages.length - 1];
+  if (!lastMessage || lastMessage.role !== "user") {
+    return;
+  }
+  nextTick(() => {
+    lastMessageSubmitted.value = true;
+    updateLastMessageHeight();
+    nextTick(() => {
+      scrollToMessage(lastMessage.id);
+    });
+  });
+});
+function checkScrollPosition() {
+  if (!parent.value) {
+    return;
+  }
+  const scrollPosition = parent.value.scrollTop + parent.value.clientHeight;
+  const scrollHeight = parent.value.scrollHeight;
+  const threshold = 100;
+  showAutoScroll.value = scrollHeight - scrollPosition >= threshold;
+}
+function onAutoScrollClick() {
+  scrollToBottom();
+}
+function getScrollParent(node) {
+  if (!node) {
+    return document.documentElement;
+  }
+  const overflowRegex = /auto|scroll/;
+  let current = node;
+  while (current && current !== document.body && current !== document.documentElement) {
+    const style = window.getComputedStyle(current);
+    if (overflowRegex.test(style.overflowY)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return document.documentElement;
+}
+function updateLastMessageHeight() {
+  if (!el.value || !parent.value || !props.messages?.length || !lastMessageSubmitted.value) {
+    return;
+  }
+  const { height: parentHeight } = useElementBounding(parent.value);
+  const lastMessage = props.messages.findLast((m) => m.role === "user");
+  if (!lastMessage) {
+    return;
+  }
+  const lastMessageEl = messagesRefs.value.get(lastMessage.id);
+  if (!lastMessageEl) {
+    return;
+  }
+  let spacingOffset = props.spacingOffset || 0;
+  const elComputedStyle = window.getComputedStyle(el.value);
+  const parentComputedStyle = window.getComputedStyle(parent.value);
+  spacingOffset += Number.parseFloat(elComputedStyle.rowGap) || Number.parseFloat(elComputedStyle.gap) || 0;
+  spacingOffset += Number.parseFloat(parentComputedStyle.paddingTop) || 0;
+  spacingOffset += Number.parseFloat(parentComputedStyle.paddingBottom) || 0;
+  lastMessageHeight.value = Math.max(parentHeight.value - lastMessageEl.offsetHeight - spacingOffset, 0);
+}
+onMounted(() => {
+  parent.value = getScrollParent(el.value || null);
+  if (!parent.value) {
+    return;
+  }
+  if (props.shouldScrollToBottom) {
+    nextTick(() => scrollToBottom(false));
+  } else {
+    checkScrollPosition();
+  }
+  useEventListener(parent, "scroll", checkScrollPosition);
+  useEventListener(window, "resize", () => nextTick(updateLastMessageHeight));
+});
+</script>
+
+<template>
+  <div
+    ref="el"
+    :data-status="status"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="{ '--last-message-height': `${lastMessageHeight}px` }"
+  >
+    <slot>
+      <UChatMessage
+        v-for="message in messages"
+        :key="message.id"
+        v-bind="{ ...message, ...message.role === 'user' ? userProps : assistantProps }"
+        :ref="(el) => registerMessageRef(message.id, el)"
+        :compact="compact"
+      >
+        <template v-for="(_, name) in proxySlots" #[name]>
+          <slot :name="name" v-bind="{ message }" />
+        </template>
+      </UChatMessage>
+    </slot>
+
+    <UChatMessage
+      v-if="status === 'submitted'"
+      id="indicator"
+      content=""
+      role="assistant"
+      v-bind="{ ...assistantProps, actions: void 0 }"
+      :compact="compact"
+    >
+      <template #content>
+        <div :class="ui.indicator({ class: props.ui?.indicator })">
+          <slot name="indicator">
+            <span />
+            <span />
+            <span />
+          </slot>
+        </div>
+      </template>
+    </UChatMessage>
+
+    <Presence :present="showAutoScroll">
+      <div :data-state="showAutoScroll ? 'open' : 'closed'" :class="ui.viewport({ class: props.ui?.viewport })">
+        <slot name="viewport" :on-click="onAutoScrollClick">
+          <UButton
+            v-if="autoScroll"
+            :icon="autoScrollIcon || appConfig.ui.icons.arrowDown"
+            color="neutral"
+            variant="outline"
+            v-bind="typeof autoScroll === 'object' ? autoScroll : {}"
+            :class="ui.autoScroll({ class: props.ui?.autoScroll })"
+            @click="onAutoScrollClick"
+          />
+        </slot>
+      </div>
+    </Presence>
+  </div>
+</template>

package/dist/runtime/components/ChatMessages.vue.d.ts

@@ -0,0 +1,83 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps, ComponentConfig } from '@eslamdevui/ui';
+import type { Message, UseChatHelpers } from '@ai-sdk/vue';
+import theme from '#build/ui/chat-messages';
+import type { ChatMessageProps } from '../types';
+type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
+export interface ChatMessagesProps {
+    messages?: Message[];
+    status?: UseChatHelpers['status']['value'];
+    /**
+     * Whether to automatically scroll to the bottom when a message is streaming.
+     * @defaultValue false
+     */
+    shouldAutoScroll?: boolean;
+    /**
+     * Whether to scroll to the bottom on mounted.
+     * @defaultValue true
+     */
+    shouldScrollToBottom?: boolean;
+    /**
+     * Display an auto scroll button.
+     * `{ size: 'md', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    autoScroll?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the auto scroll button.
+     * @defaultValue appConfig.ui.icons.arrowDown
+     * @IconifyIcon
+     */
+    autoScrollIcon?: string;
+    /**
+     * The `user` messages props.
+     * `{ side: 'right', variant: 'soft' }`{lang="ts-type"}
+     */
+    user?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions'>;
+    /**
+     * The `assistant` messages props.
+     * `{ side: 'left', variant: 'naked' }`{lang="ts-type"}
+     */
+    assistant?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions'>;
+    /**
+     * Render the messages in a compact style.
+     * This is done automatically when used inside a `UChatPalette`{lang="ts-type"}.
+     * @defaultValue false
+     */
+    compact?: boolean;
+    /**
+     * The spacing offset for the last message in px. Can be useful when the prompt is sticky for example.
+     * @defaultValue 0
+     */
+    spacingOffset?: number;
+    class?: any;
+    ui?: ChatMessages['slots'];
+}
+export interface ChatMessagesSlots {
+    default(props?: {}): any;
+    indicator(props?: {}): any;
+    viewport(props: {
+        onClick: () => void;
+    }): any;
+    content(props: {
+        message: Message;
+    }): any;
+    leading(props: {
+        message: Message;
+    }): any;
+    actions(props: {
+        message: Message;
+    }): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatMessagesProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessagesProps> & Readonly<{}>, {
+    autoScroll: boolean | Partial<ButtonProps>;
+    shouldAutoScroll: boolean;
+    shouldScrollToBottom: boolean;
+    spacingOffset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatMessagesSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ChatPrompt.vue

@@ -0,0 +1,77 @@
+<script>
+import theme from "#build/ui/chat-prompt";
+</script>
+
+<script setup>
+import { computed, useTemplateRef } from "vue";
+import { Primitive, useForwardProps } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { omit } from "@eslamdevui/ui/utils";
+import { useAppConfig } from "#imports";
+import { useLocalePro } from "../composables/useLocalePro";
+import { transformUI } from "../utils";
+import { tv } from "../utils/tv";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "form" },
+  placeholder: { type: String, required: false },
+  autofocus: { type: null, required: false, default: true },
+  autoresize: { type: null, required: false, default: true },
+  rows: { type: null, required: false, default: 1 },
+  variant: { type: null, required: false },
+  error: { type: Error, required: false },
+  class: { type: null, required: false },
+  ui: { type: void 0, required: false }
+});
+const emits = defineEmits(["submit", "close"]);
+const slots = defineSlots();
+const model = defineModel({ type: String, ...{ default: "" } });
+const { t } = useLocalePro();
+const appConfig = useAppConfig();
+const textareaProps = useForwardProps(reactivePick(props, "autofocus", "autoresize", "rows"));
+const proxySlots = omit(slots, ["header", "footer"]);
+const uiPro = computed(
+  () => tv({ extend: tv(theme), ...appConfig.ui?.chatPrompt || {} })({
+    variant: props.variant
+  })
+);
+const textarea = useTemplateRef("textarea");
+const submit = (e) => {
+  if (!model.value?.trim()) return;
+  emits("submit", e);
+};
+const blur = (e) => {
+  textarea.value?.textareaRef?.blur();
+  emits("close", e);
+};
+defineExpose({ textareaRef: textarea.value?.textareaRef });
+</script>
+
+<template>
+  <Primitive :as="as" :class="uiPro.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
+    <div v-if="!!slots.header" :class="uiPro.header({ class: props.ui?.header })">
+      <slot name="header" />
+    </div>
+
+    <UTextarea
+      ref="textarea"
+      v-model="model"
+      :placeholder="placeholder || t('chatPrompt.placeholder')"
+      :disabled="Boolean(error)"
+      variant="none"
+      v-bind="{ ...textareaProps, ...$attrs }"
+      :ui="transformUI(omit(uiPro, ['root', 'body', 'header', 'footer']), props.ui)"
+      :class="uiPro.body({ class: props.ui?.body })"
+      @keydown.enter.exact.prevent="submit"
+      @keydown.esc="blur"
+    >
+      <template v-for="(_, name) in proxySlots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </UTextarea>
+
+    <div v-if="!!slots.footer" :class="uiPro.footer({ class: props.ui?.footer })">
+      <slot name="footer" />
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/ChatPrompt.vue.d.ts

@@ -0,0 +1,60 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { TextareaProps, TextareaSlots, ComponentConfig } from '@eslamdevui/ui';
+import theme from '#build/ui/chat-prompt';
+type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt', 'ui'>;
+export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps, 'autofocusDelay' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'form'
+     */
+    as?: any;
+    /**
+     * The placeholder text for the textarea.
+     * @defaultValue t('chatPrompt.placeholder')
+     */
+    placeholder?: string;
+    autofocus?: TextareaProps['autofocus'];
+    autoresize?: TextareaProps['autoresize'];
+    rows?: TextareaProps['rows'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: ChatPrompt['variants']['variant'];
+    error?: Error;
+    class?: any;
+    ui?: ChatPrompt['slots'] & TextareaProps['ui'];
+}
+export interface ChatPromptEmits {
+    (e: 'submit' | 'close', event: Event): void;
+}
+export interface ChatPromptSlots extends TextareaSlots {
+    header(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptProps & {
+    modelValue?: string;
+}, {
+    textareaRef: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+} & {
+    close: (event: Event) => any;
+    submit: (event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<ChatPromptProps & {
+    modelValue?: string;
+}> & Readonly<{
+    onClose?: ((event: Event) => any) | undefined;
+    onSubmit?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    as: any;
+    autofocus: TextareaProps["autofocus"];
+    autoresize: TextareaProps["autoresize"];
+    rows: TextareaProps["rows"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ChatPromptSubmit.vue

@@ -0,0 +1,74 @@
+<script>
+import theme from "#build/ui/chat-prompt-submit";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { useLocalePro } from "../composables/useLocalePro";
+import { transformUI } from "../utils";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  status: { type: null, required: false, default: "ready" },
+  icon: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  streamingIcon: { type: String, required: false },
+  streamingColor: { type: null, required: false, default: "neutral" },
+  streamingVariant: { type: null, required: false, default: "subtle" },
+  submittedIcon: { type: String, required: false },
+  submittedColor: { type: null, required: false, default: "neutral" },
+  submittedVariant: { type: null, required: false, default: "subtle" },
+  errorIcon: { type: String, required: false },
+  errorColor: { type: null, required: false, default: "error" },
+  errorVariant: { type: null, required: false, default: "soft" },
+  ui: { type: void 0, required: false },
+  class: { type: null, required: false }
+});
+const emit = defineEmits(["stop", "reload"]);
+const slots = defineSlots();
+const { t } = useLocalePro();
+const appConfig = useAppConfig();
+const buttonProps = computed(() => {
+  return {
+    ready: {
+      icon: props.icon || appConfig.ui.icons.arrowUp,
+      color: props.color ?? "primary",
+      variant: props.variant ?? "solid",
+      type: "submit"
+    },
+    submitted: {
+      icon: props.submittedIcon || appConfig.ui.icons.stop,
+      color: props.submittedColor,
+      variant: props.submittedVariant,
+      onClick: () => emit("stop")
+    },
+    streaming: {
+      icon: props.streamingIcon || appConfig.ui.icons.stop,
+      color: props.streamingColor,
+      variant: props.streamingVariant,
+      onClick: () => emit("stop")
+    },
+    error: {
+      icon: props.errorIcon || appConfig.ui.icons.reload,
+      color: props.errorColor,
+      variant: props.errorVariant,
+      onClick: () => emit("reload")
+    }
+  }[props.status || "ready"];
+});
+const uiPro = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPromptSubmit || {} })());
+</script>
+
+<template>
+  <UButton
+    :aria-label="t('chatPromptSubmit.label')"
+    v-bind="buttonProps"
+    :class="uiPro.base({ class: [props.ui?.base, props.class] })"
+    :ui="transformUI(uiPro, props.ui)"
+  >
+    <template v-for="(_, name) in slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </UButton>
+</template>

package/dist/runtime/components/ChatPromptSubmit.vue.d.ts

@@ -0,0 +1,99 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-prompt-submit';
+import type { ButtonProps, ButtonSlots } from '../types';
+import type { UseChatHelpers } from '@ai-sdk/vue';
+import type { ComponentConfig } from '../types/utils';
+type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>;
+export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonProps, 'size' | 'label'> {
+    status?: UseChatHelpers['status']['value'];
+    /**
+     * The icon displayed in the button when the status is `ready`.
+     * @defaultValue appConfig.ui.icons.arrowUp
+     * @IconifyIcon
+     */
+    icon?: string;
+    /**
+     * The color of the button when the status is `ready`.
+     * @defaultValue 'primary'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `ready`.
+     * @defaultValue 'solid'
+     */
+    variant?: ButtonProps['variant'];
+    /**
+     * The icon displayed in the button when the status is `streaming`.
+     * @defaultValue appConfig.ui.icons.stop
+     * @IconifyIcon
+     */
+    streamingIcon?: string;
+    /**
+     * The color of the button when the status is `streaming`.
+     * @defaultValue 'neutral'
+     */
+    streamingColor?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `streaming`.
+     * @defaultValue 'subtle'
+     */
+    streamingVariant?: ButtonProps['variant'];
+    /**
+     * The icon displayed in the button when the status is `submitted`.
+     * @defaultValue appConfig.ui.icons.stop
+     * @IconifyIcon
+     */
+    submittedIcon?: string;
+    /**
+     * The color of the button when the status is `submitted`.
+     * @defaultValue 'neutral'
+     */
+    submittedColor?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `submitted`.
+     * @defaultValue 'subtle'
+     */
+    submittedVariant?: ButtonProps['variant'];
+    /**
+     * The icon displayed in the button when the status is `error`.
+     * @defaultValue appConfig.ui.icons.reload
+     * @IconifyIcon
+     */
+    errorIcon?: string;
+    /**
+     * The color of the button when the status is `error`.
+     * @defaultValue 'error'
+     */
+    errorColor?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `error`.
+     * @defaultValue 'soft'
+     */
+    errorVariant?: ButtonProps['variant'];
+    ui?: ChatPromptSubmit['slots'] & ButtonProps['ui'];
+    class?: any;
+}
+export interface ChatPromptSubmitEmits {
+    (e: 'stop' | 'reload'): void;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptSubmitProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    stop: () => any;
+    reload: () => any;
+}, string, import("vue").PublicProps, Readonly<ChatPromptSubmitProps> & Readonly<{
+    onStop?: (() => any) | undefined;
+    onReload?: (() => any) | undefined;
+}>, {
+    status: UseChatHelpers["status"]["value"];
+    streamingColor: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    streamingVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    submittedColor: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    submittedVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    errorColor: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
+    errorVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};