@gxp-dev/mod-ui 2.0.0

package/src/components/compositions/elements/code/ChatMessage.test.ts

@@ -0,0 +1,220 @@
+import { describe, expect, it } from "vitest"
+import { flushPromises, mount } from "@vue/test-utils"
+import ChatMessage from "./ChatMessage.vue"
+
+describe("ChatMessage (props-based composition)", () => {
+  it("mounts with no props and renders an empty bubble cleanly", () => {
+    const wrapper = mount(ChatMessage)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('[data-testid="chat-message"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="chat-message-bubble"]').exists()).toBe(
+      true,
+    )
+    // No body when no message and not pending.
+    expect(wrapper.find('[data-testid="chat-message-body"]').exists()).toBe(
+      false,
+    )
+    expect(wrapper.find('[data-testid="chat-message-pending"]').exists()).toBe(
+      false,
+    )
+  })
+
+  it("renders the message text", () => {
+    const wrapper = mount(ChatMessage, {
+      props: { message: "Hello world" },
+    })
+    expect(wrapper.find('[data-testid="chat-message-body"]').text()).toBe(
+      "Hello world",
+    )
+  })
+
+  it("renders the authorName", () => {
+    const wrapper = mount(ChatMessage, {
+      props: { authorName: "Ada Lovelace", message: "Hi" },
+    })
+    expect(wrapper.find('[data-testid="chat-message-author"]').text()).toBe(
+      "Ada Lovelace",
+    )
+  })
+
+  it("derives the avatar fallback initial when no fallback is provided", () => {
+    const wrapper = mount(ChatMessage, {
+      props: { authorName: "ada lovelace" },
+    })
+    // No avatar URL provided → fallback renders.
+    expect(wrapper.text()).toContain("A")
+  })
+
+  it("renders a role badge for non-user roles and hides it for the user role", () => {
+    const userWrapper = mount(ChatMessage, {
+      props: { role: "user", message: "Hi" },
+    })
+    expect(
+      userWrapper.find('[data-testid="chat-message-role-badge"]').exists(),
+    ).toBe(false)
+
+    const assistantWrapper = mount(ChatMessage, {
+      props: { role: "assistant", message: "Hi" },
+    })
+    expect(
+      assistantWrapper.find('[data-testid="chat-message-role-badge"]').exists(),
+    ).toBe(true)
+    expect(
+      assistantWrapper.find('[data-testid="chat-message-role-badge"]').text(),
+    ).toBe("assistant")
+  })
+
+  it("formats a timestamp (Date and ISO string) as local time", () => {
+    const dateWrapper = mount(ChatMessage, {
+      props: { timestamp: new Date("2024-06-01T15:30:00Z") },
+    })
+    const dateText = dateWrapper
+      .find('[data-testid="chat-message-timestamp"]')
+      .text()
+    expect(dateText.length).toBeGreaterThan(0)
+
+    const isoWrapper = mount(ChatMessage, {
+      props: { timestamp: "2024-06-01T15:30:00Z" },
+    })
+    const isoText = isoWrapper
+      .find('[data-testid="chat-message-timestamp"]')
+      .text()
+    expect(isoText).toBe(dateText)
+  })
+
+  it("shows the typing indicator when pending and hides the message body", () => {
+    const wrapper = mount(ChatMessage, {
+      props: { pending: true, message: "Should be hidden" },
+    })
+    expect(wrapper.find('[data-testid="chat-message-pending"]').exists()).toBe(
+      true,
+    )
+    expect(wrapper.find('[data-testid="chat-message-body"]').exists()).toBe(
+      false,
+    )
+    // Three dots.
+    expect(
+      wrapper
+        .find('[data-testid="chat-message-pending"]')
+        .findAll("span").length,
+    ).toBe(3)
+  })
+
+  it("renders an error line when error is provided", () => {
+    const wrapper = mount(ChatMessage, {
+      props: { message: "Hi", error: "Failed to deliver" },
+    })
+    const err = wrapper.find('[data-testid="chat-message-error"]')
+    expect(err.exists()).toBe(true)
+    expect(err.text()).toBe("Failed to deliver")
+    expect(err.attributes("class")).toContain("text-destructive")
+  })
+
+  it("renders action buttons and emits 'action' with the right id when clicked", async () => {
+    const wrapper = mount(ChatMessage, {
+      props: {
+        message: "Hi",
+        actions: [
+          { id: "copy", label: "Copy" },
+          { id: "regenerate", label: "Regenerate" },
+        ],
+      },
+    })
+    const buttons = wrapper.findAll('[data-action-id]')
+    expect(buttons.length).toBe(2)
+    expect(buttons[0].text()).toBe("Copy")
+    expect(buttons[1].text()).toBe("Regenerate")
+
+    await buttons[1].trigger("click")
+    const emitted = wrapper.emitted("action")
+    expect(emitted).toBeTruthy()
+    expect(emitted?.[0]).toEqual([{ id: "regenerate" }])
+  })
+
+  it("`align` overrides role-based alignment", () => {
+    // Role is "assistant" → default start, but align="end" forces end.
+    const wrapper = mount(ChatMessage, {
+      props: { role: "assistant", align: "end", message: "Hi" },
+    })
+    expect(
+      wrapper.find('[data-testid="chat-message"]').attributes("data-align"),
+    ).toBe("end")
+  })
+
+  it("`variant` overrides role-based variant", () => {
+    // Role "user" defaults to "accent", but variant="destructive" wins.
+    const wrapper = mount(ChatMessage, {
+      props: { role: "user", variant: "destructive", message: "Hi" },
+    })
+    expect(
+      wrapper.find('[data-testid="chat-message"]').attributes("data-variant"),
+    ).toBe("destructive")
+    expect(
+      wrapper
+        .find('[data-testid="chat-message-bubble"]')
+        .attributes("class"),
+    ).toContain("bg-destructive")
+  })
+
+  it("renders HTML via v-html when allowHtml is true", () => {
+    const wrapper = mount(ChatMessage, {
+      props: {
+        message: "<strong data-testid='inner-strong'>Bold</strong>",
+        allowHtml: true,
+      },
+    })
+    const html = wrapper.html()
+    expect(html).toContain("<strong")
+    expect(html).toContain("Bold")
+    // Sanity: when allowHtml is false the tag is escaped.
+    const escaped = mount(ChatMessage, {
+      props: { message: "<strong>Bold</strong>", allowHtml: false },
+    })
+    expect(escaped.html()).not.toContain("<strong>Bold</strong>")
+    expect(escaped.text()).toContain("<strong>Bold</strong>")
+  })
+
+  it("loads lucide icons for action buttons when an icon is supplied", async () => {
+    const wrapper = mount(ChatMessage, {
+      props: {
+        message: "Hi",
+        actions: [{ id: "copy", label: "Copy", icon: "copy" }],
+      },
+    })
+    for (let i = 0; i < 5; i += 1) {
+      await flushPromises()
+    }
+    // The lucide SVG is racy in jsdom; tolerate either an <svg> or just
+    // the button being present with the right data-action-id.
+    const btn = wrapper.find('[data-action-id="copy"]')
+    expect(btn.exists()).toBe(true)
+    expect(btn.text()).toContain("Copy")
+  })
+
+  it("user role defaults to right alignment and accent variant", () => {
+    const wrapper = mount(ChatMessage, {
+      props: { role: "user", message: "Hi" },
+    })
+    const root = wrapper.find('[data-testid="chat-message"]')
+    expect(root.attributes("data-align")).toBe("end")
+    expect(root.attributes("data-variant")).toBe("accent")
+  })
+
+  it("applies classList (string and array) to the root", () => {
+    const stringWrapper = mount(ChatMessage, {
+      props: { message: "Hi", classList: "extra-1" },
+    })
+    expect(
+      stringWrapper.find('[data-testid="chat-message"]').attributes("class"),
+    ).toContain("extra-1")
+
+    const arrayWrapper = mount(ChatMessage, {
+      props: { message: "Hi", classList: ["extra-1", "extra-2"] },
+    })
+    const cls = arrayWrapper
+      .find('[data-testid="chat-message"]')
+      .attributes("class")
+    expect(cls).toContain("extra-1")
+    expect(cls).toContain("extra-2")
+  })
+})

package/src/components/compositions/elements/code/ChatMessage.vue

@@ -0,0 +1,375 @@
+<script setup lang="ts">
+/**
+ * Generic chat-message bubble composition.
+ *
+ * Display-only — renders a single chat bubble in the style of Slack /
+ * Discord / iMessage. Side-aligned by role, color-tinted by variant,
+ * optional avatar, role badge, timestamp, typing indicator, inline
+ * error, and a row of ghost-button actions.
+ *
+ * No platform-specific integration. Form-data store is not touched.
+ *
+ *   <ChatMessage
+ *     role="assistant"
+ *     authorName="Assistant"
+ *     message="Hello, how can I help?"
+ *     :timestamp="new Date()"
+ *   />
+ */
+import { computed, ref, watch, type Component } from "vue"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type ChatMessageAlign = "auto" | "start" | "end"
+export type ChatMessageVariant =
+  | "default"
+  | "muted"
+  | "accent"
+  | "destructive"
+
+export interface ChatMessageAction {
+  id: string
+  label: string
+  icon?: string
+}
+
+export interface ChatMessageProps {
+  message?: string
+  role?: "user" | "assistant" | "system" | "tool" | string
+  authorName?: string
+  authorAvatarUrl?: string
+  authorAvatarFallback?: string
+  timestamp?: string | Date
+  pending?: boolean
+  error?: string
+  actions?: ChatMessageAction[]
+  align?: ChatMessageAlign
+  variant?: ChatMessageVariant
+  allowHtml?: boolean
+  classList?: string[] | string
+}
+
+const props = withDefaults(defineProps<ChatMessageProps>(), {
+  role: "user",
+  align: "auto",
+  pending: false,
+  allowHtml: false,
+  actions: () => [],
+})
+
+const emit = defineEmits<{
+  (e: "action", payload: { id: string }): void
+}>()
+
+/* ---------- alignment ---------- */
+
+const resolvedAlign = computed<"start" | "end">(() => {
+  if (props.align === "start" || props.align === "end") {
+    return props.align
+  }
+  return props.role === "user" ? "end" : "start"
+})
+
+const isEnd = computed<boolean>(() => resolvedAlign.value === "end")
+
+/* ---------- variant ---------- */
+
+const ROLE_VARIANT: Record<string, ChatMessageVariant> = {
+  user: "accent",
+  assistant: "muted",
+  system: "default",
+  tool: "muted",
+}
+
+const resolvedVariant = computed<ChatMessageVariant>(() => {
+  if (props.variant) {
+    return props.variant
+  }
+  return ROLE_VARIANT[props.role] ?? "default"
+})
+
+const bubbleVariants = cva(
+  "max-w-[36rem] min-w-0 break-words rounded-2xl border px-3 py-2 text-sm shadow-sm",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground border-border",
+        muted: "bg-muted text-foreground border-transparent",
+        accent: "bg-primary text-primary-foreground border-transparent",
+        destructive:
+          "bg-destructive text-destructive-foreground border-transparent",
+      },
+      align: {
+        start: "rounded-tl-sm",
+        end: "rounded-tr-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      align: "start",
+    },
+  },
+)
+
+type BubbleVariants = VariantProps<typeof bubbleVariants>
+
+const bubbleClass = computed<string>(() =>
+  bubbleVariants({
+    variant: resolvedVariant.value as BubbleVariants["variant"],
+    align: resolvedAlign.value,
+  }),
+)
+
+/* ---------- avatar fallback ---------- */
+
+const derivedAvatarFallback = computed<string>(() => {
+  if (props.authorAvatarFallback) {
+    return props.authorAvatarFallback
+  }
+  const source = (props.authorName ?? props.role ?? "?").trim()
+  return source ? source.charAt(0).toUpperCase() : "?"
+})
+
+/* ---------- timestamp ---------- */
+
+const formattedTimestamp = computed<string>(() => {
+  const ts = props.timestamp
+  if (!ts) {
+    return ""
+  }
+  const date = ts instanceof Date ? ts : new Date(ts)
+  if (Number.isNaN(date.getTime())) {
+    return ""
+  }
+  try {
+    return new Intl.DateTimeFormat(undefined, {
+      hour: "numeric",
+      minute: "2-digit",
+    }).format(date)
+  } catch {
+    return date.toISOString()
+  }
+})
+
+/* ---------- root class ---------- */
+
+const rootClass = computed<string>(() => {
+  const cl = props.classList
+  if (!cl) {
+    return ""
+  }
+  return Array.isArray(cl) ? cl.join(" ") : cl
+})
+
+/* ---------- role badge ---------- */
+
+const showRoleBadge = computed<boolean>(() => {
+  return Boolean(props.role) && props.role !== "user"
+})
+
+/* ---------- actions (lucide icons, lazy) ---------- */
+
+const ActionIcons = ref<Record<string, Component | null>>({})
+
+function toPascalCase(input: string): string {
+  return input
+    .replace(/[-_\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : ""))
+    .replace(/^(.)/, (m) => m.toUpperCase())
+}
+
+async function loadActionIcons(actions: ChatMessageAction[]): Promise<void> {
+  const needed = actions.filter((a) => a.icon).map((a) => a.icon as string)
+  if (needed.length === 0) {
+    return
+  }
+  const mod = await import("lucide-vue-next")
+  const registry = mod as unknown as Record<string, Component | undefined>
+  const next: Record<string, Component | null> = { ...ActionIcons.value }
+  for (const raw of needed) {
+    const name = toPascalCase(raw)
+    next[raw] = registry[name] ?? null
+  }
+  ActionIcons.value = next
+}
+
+watch(
+  () => props.actions,
+  (next) => {
+    void loadActionIcons(next ?? [])
+  },
+  { immediate: true, deep: true },
+)
+
+function onAction(id: string): void {
+  emit("action", { id })
+}
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex w-full items-end gap-2',
+        isEnd ? 'justify-end' : 'justify-start',
+        rootClass,
+      )
+    "
+    :data-role="props.role"
+    :data-align="resolvedAlign"
+    :data-variant="resolvedVariant"
+    data-testid="chat-message"
+  >
+    <!-- left-side avatar -->
+    <Avatar
+      v-if="!isEnd"
+      size="sm"
+      class="mb-1"
+      data-testid="chat-message-avatar"
+    >
+      <AvatarImage
+        v-if="props.authorAvatarUrl"
+        :src="props.authorAvatarUrl"
+        :alt="props.authorName ?? props.role"
+      />
+      <AvatarFallback>{{ derivedAvatarFallback }}</AvatarFallback>
+    </Avatar>
+
+    <div
+      :class="
+        cn(
+          'flex min-w-0 flex-col gap-1',
+          isEnd ? 'items-end' : 'items-start',
+        )
+      "
+    >
+      <!-- bubble -->
+      <div :class="bubbleClass" data-testid="chat-message-bubble">
+        <!-- header -->
+        <div
+          v-if="props.authorName || showRoleBadge || formattedTimestamp"
+          :class="
+            cn(
+              'mb-1 flex w-full items-center gap-2 text-xs',
+              isEnd ? 'flex-row-reverse' : 'flex-row',
+            )
+          "
+        >
+          <span
+            v-if="props.authorName"
+            class="font-medium"
+            data-testid="chat-message-author"
+          >
+            {{ props.authorName }}
+          </span>
+          <Badge
+            v-if="showRoleBadge"
+            variant="outline"
+            size="sm"
+            data-testid="chat-message-role-badge"
+          >
+            {{ props.role }}
+          </Badge>
+          <span
+            v-if="formattedTimestamp"
+            :class="
+              cn(
+                'text-[11px] opacity-70',
+                resolvedVariant === 'accent' || resolvedVariant === 'destructive'
+                  ? ''
+                  : 'text-muted-foreground',
+                isEnd ? 'mr-auto' : 'ml-auto',
+              )
+            "
+            data-testid="chat-message-timestamp"
+          >
+            {{ formattedTimestamp }}
+          </span>
+        </div>
+
+        <!-- body -->
+        <div
+          v-if="props.pending"
+          class="flex items-center gap-1 py-1"
+          data-testid="chat-message-pending"
+          aria-label="Typing"
+        >
+          <span class="size-1.5 animate-bounce rounded-full bg-current opacity-60" />
+          <span
+            class="size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:150ms]"
+          />
+          <span
+            class="size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:300ms]"
+          />
+        </div>
+        <div
+          v-else-if="props.allowHtml && props.message"
+          class="whitespace-pre-wrap leading-snug"
+          data-testid="chat-message-body"
+          v-html="props.message"
+        />
+        <div
+          v-else-if="props.message"
+          class="whitespace-pre-wrap leading-snug"
+          data-testid="chat-message-body"
+        >
+          {{ props.message }}
+        </div>
+      </div>
+
+      <!-- error -->
+      <p
+        v-if="props.error"
+        class="text-xs text-destructive"
+        data-testid="chat-message-error"
+      >
+        {{ props.error }}
+      </p>
+
+      <!-- actions -->
+      <div
+        v-if="props.actions && props.actions.length > 0"
+        :class="
+          cn(
+            'flex flex-wrap gap-1',
+            isEnd ? 'justify-end' : 'justify-start',
+          )
+        "
+        data-testid="chat-message-actions"
+      >
+        <Button
+          v-for="action in props.actions"
+          :key="action.id"
+          type="button"
+          variant="ghost"
+          size="sm"
+          :data-action-id="action.id"
+          @click="onAction(action.id)"
+        >
+          <component
+            :is="action.icon ? ActionIcons[action.icon] : null"
+            v-if="action.icon && ActionIcons[action.icon]"
+          />
+          <span>{{ action.label }}</span>
+        </Button>
+      </div>
+    </div>
+
+    <!-- right-side avatar -->
+    <Avatar
+      v-if="isEnd"
+      size="sm"
+      class="mb-1"
+      data-testid="chat-message-avatar"
+    >
+      <AvatarImage
+        v-if="props.authorAvatarUrl"
+        :src="props.authorAvatarUrl"
+        :alt="props.authorName ?? props.role"
+      />
+      <AvatarFallback>{{ derivedAvatarFallback }}</AvatarFallback>
+    </Avatar>
+  </div>
+</template>

package/src/components/compositions/elements/code/FileTree.stories.ts

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import FileTree from "./FileTree.vue"
+import type { TreeNode } from "./FileTree.vue"
+
+const ROOT: TreeNode[] = [
+  { path: "src", name: "src", kind: "directory" },
+  { path: "tests", name: "tests", kind: "directory" },
+  { path: "README.md", name: "README.md", kind: "file" },
+  { path: "package.json", name: "package.json", kind: "file" },
+]
+
+const SRC: TreeNode[] = [
+  { path: "src/components", name: "components", kind: "directory" },
+  { path: "src/index.ts", name: "index.ts", kind: "file" },
+  { path: "src/App.vue", name: "App.vue", kind: "file" },
+]
+
+const SRC_COMPONENTS: TreeNode[] = [
+  { path: "src/components/Button.vue", name: "Button.vue", kind: "file" },
+  { path: "src/components/Card.vue", name: "Card.vue", kind: "file" },
+  { path: "src/components/Input.vue", name: "Input.vue", kind: "file" },
+]
+
+const TESTS: TreeNode[] = [
+  { path: "tests/Button.test.ts", name: "Button.test.ts", kind: "file" },
+]
+
+function mockLoad(delay = 250): (path: string) => Promise<TreeNode[]> {
+  return (path: string) =>
+    new Promise((resolve) =>
+      setTimeout(() => {
+        if (path === "") {
+          resolve(ROOT)
+        } else if (path === "src") {
+          resolve(SRC)
+        } else if (path === "src/components") {
+          resolve(SRC_COMPONENTS)
+        } else if (path === "tests") {
+          resolve(TESTS)
+        } else {
+          resolve([])
+        }
+      }, delay),
+    )
+}
+
+function neverResolve(): (path: string) => Promise<TreeNode[]> {
+  return () => new Promise(() => {})
+}
+
+function alwaysFail(): (path: string) => Promise<TreeNode[]> {
+  return () => Promise.reject(new globalThis.Error("Repository not available"))
+}
+
+const meta = {
+  title: "Compositions/Elements/Code/FileTree",
+  component: FileTree,
+  tags: ["autodocs"],
+  args: {
+    label: "File Tree",
+    onLoadTree: mockLoad(),
+  },
+  decorators: [
+    () => ({
+      template: '<div class="w-96 p-4"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof FileTree>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    onLoadTree: mockLoad(),
+  },
+}
+
+export const WithSelectedItem: Story = {
+  args: {
+    onLoadTree: mockLoad(),
+    selectedPath: "README.md",
+    expandedPaths: ["src", "src/components"],
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    onLoadTree: neverResolve(),
+  },
+}
+
+export const ErrorState: Story = {
+  args: {
+    onLoadTree: alwaysFail(),
+  },
+}
+
+export const Showcase: Story = {
+  args: {} as never,
+  render: () => ({
+    components: { FileTree },
+    setup() {
+      return { load: mockLoad(150) }
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <FileTree label="Project files" :on-load-tree="load" />
+        <FileTree
+          label="With selection"
+          :on-load-tree="load"
+          selected-path="README.md"
+          :expanded-paths="['src']"
+        />
+      </div>
+    `,
+  }),
+}