@gxp-dev/app-ui 0.1.6

package/src/components/domain/barcode-scanner/BarcodeScanner.test.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import BarcodeScanner from './BarcodeScanner.vue'
+
+describe('barcodeScanner', () => {
+  let wrapper: VueWrapper
+
+  afterEach(() => {
+    wrapper?.unmount()
+  })
+
+  it('renders scan button when not open (default state)', () => {
+    wrapper = mount(BarcodeScanner)
+
+    const button = wrapper.find('button')
+    expect(button.exists()).toBe(true)
+    expect(button.text()).toBe('Start Scanning')
+    expect(wrapper.find('#gx-scanner-viewport').exists()).toBe(false)
+  })
+
+  it('renders custom scan button text', () => {
+    wrapper = mount(BarcodeScanner, {
+      props: {
+        scanButtonText: 'Scan Barcode',
+      },
+    })
+
+    const button = wrapper.find('button')
+    expect(button.text()).toBe('Scan Barcode')
+  })
+
+  it('renders slot content when not scanning', () => {
+    wrapper = mount(BarcodeScanner, {
+      slots: {
+        default: '<div class="custom-trigger">Custom Scanner Button</div>',
+      },
+    })
+
+    expect(wrapper.find('.custom-trigger').exists()).toBe(true)
+    expect(wrapper.find('.custom-trigger').text()).toBe('Custom Scanner Button')
+    expect(wrapper.find('button').exists()).toBe(false)
+  })
+
+  it('applies custom class', () => {
+    wrapper = mount(BarcodeScanner, {
+      props: {
+        class: 'custom-scanner-class',
+      },
+    })
+
+    const root = wrapper.find('div')
+    expect(root.classes()).toContain('custom-scanner-class')
+    expect(root.classes()).toContain('flex')
+    expect(root.classes()).toContain('w-full')
+  })
+
+  it('renders instructions and back button when isOpen is true', async () => {
+    wrapper = mount(BarcodeScanner, {
+      props: {
+        instructions: 'Hold steady',
+        backText: 'Cancel',
+      },
+    })
+
+    // Set internal state to open
+    wrapper.vm.isOpen = true
+    await nextTick()
+
+    // Should show instructions
+    expect(wrapper.text()).toContain('Hold steady')
+
+    // Should show viewport
+    expect(wrapper.find('.aspect-square').exists()).toBe(true)
+
+    // Should show back button with custom text
+    const button = wrapper.find('button')
+    expect(button.exists()).toBe(true)
+    expect(button.text()).toBe('Cancel')
+
+    // Should not show the default slot/scan button
+    expect(wrapper.text()).not.toContain('Start Scanning')
+  })
+
+  it('exposes startScanning and stopScanning methods', () => {
+    wrapper = mount(BarcodeScanner)
+
+    expect(wrapper.vm.startScanning).toBeDefined()
+    expect(wrapper.vm.stopScanning).toBeDefined()
+    expect(typeof wrapper.vm.startScanning).toBe('function')
+    expect(typeof wrapper.vm.stopScanning).toBe('function')
+  })
+})

package/src/components/domain/barcode-scanner/BarcodeScanner.vue

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+/**
+ * Live camera-driven barcode scanner using `@ericblade/quagga2`. Decodes
+ * the configured reader formats (default `code_128_reader`) from the
+ * user's environment-facing camera and emits a `scan` event when a code
+ * is captured. Releases the camera + Quagga instance on unmount.
+ */
+
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { cn } from '@/lib/utils'
+
+export interface BarcodeScannerProps {
+  instructions?: string
+  backText?: string
+  scanButtonText?: string
+  autoStart?: boolean
+  facingMode?: 'user' | 'environment'
+  readers?: string[]
+  class?: string
+}
+
+const props = withDefaults(defineProps<BarcodeScannerProps>(), {
+  instructions: 'Position the code in front of the camera',
+  backText: 'Back',
+  scanButtonText: 'Start Scanning',
+  autoStart: false,
+  facingMode: 'environment',
+  readers: () => ['code_128_reader'],
+})
+
+const emit = defineEmits<{
+  scan: [code: string]
+  error: [error: Error]
+  'scanner-opened': []
+  'scanner-closed': []
+}>()
+
+const isOpen = ref(false)
+const scanDetected = ref(false)
+const recentScans = new Set<string>()
+const viewportRef = ref<HTMLElement | null>(null)
+
+let quaggaInstance: any = null
+
+const startScanning = async () => {
+  isOpen.value = true
+  emit('scanner-opened')
+
+  try {
+    const Quagga = (await import('@ericblade/quagga2')).default
+    quaggaInstance = Quagga
+
+    Quagga.init(
+      {
+        inputStream: {
+          type: 'LiveStream',
+          constraints: { facingMode: props.facingMode },
+          target: viewportRef.value,
+        },
+        decoder: { readers: props.readers },
+      },
+      (err: any) => {
+        if (err) {
+          emit('error', err instanceof Error ? err : new Error(String(err)))
+          return
+        }
+        Quagga.start()
+      },
+    )
+
+    Quagga.onDetected((data: any) => {
+      if (scanDetected.value) return
+
+      const code = data?.codeResult?.code
+      if (!code || code.trim() === '') return
+      if (recentScans.has(code)) return
+
+      scanDetected.value = true
+      recentScans.add(code)
+      setTimeout(() => recentScans.delete(code), 10000)
+
+      emit('scan', code)
+      scanDetected.value = false
+    })
+  } catch (err) {
+    emit('error', err instanceof Error ? err : new Error('Failed to load scanner'))
+  }
+}
+
+const stopScanning = () => {
+  if (quaggaInstance) {
+    try {
+      quaggaInstance.stop()
+    } catch {
+      // ignore
+    }
+  }
+  isOpen.value = false
+  emit('scanner-closed')
+}
+
+onMounted(() => {
+  if (props.autoStart) startScanning()
+})
+
+onBeforeUnmount(() => {
+  if (quaggaInstance) {
+    try {
+      quaggaInstance.stop()
+    } catch {
+      // ignore
+    }
+  }
+})
+
+defineExpose({ startScanning, stopScanning })
+</script>
+
+<template>
+  <div :class="cn('flex w-full flex-col items-center gap-4', props.class)">
+    <template v-if="isOpen">
+      <p class="text-sm text-muted-foreground">{{ instructions }}</p>
+      <div
+        ref="viewportRef"
+        class="relative aspect-square w-full max-w-sm overflow-hidden rounded-xl bg-black"
+      />
+      <button
+        class="inline-flex items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80"
+        @click="stopScanning"
+      >
+        {{ backText }}
+      </button>
+    </template>
+    <template v-else>
+      <slot>
+        <button
+          class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+          @click="startScanning"
+        >
+          {{ scanButtonText }}
+        </button>
+      </slot>
+    </template>
+  </div>
+</template>

package/src/components/domain/barcode-scanner/index.ts

@@ -0,0 +1,2 @@
+export { default as BarcodeScanner } from './BarcodeScanner.vue'
+export type { BarcodeScannerProps } from './BarcodeScanner.vue'

package/src/components/domain/chat-transcript/ChatTranscript.stories.ts

@@ -0,0 +1,283 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ChatTranscript } from '.'
+import type { ChatMessage } from '.'
+
+const sampleMessages: ChatMessage[] = [
+  {
+    id: '1',
+    role: 'user',
+    text: 'Hello! Can you help me with something?',
+    timestamp: new Date(Date.now() - 300000).toISOString(), // 5 minutes ago
+  },
+  {
+    id: '2',
+    role: 'assistant',
+    text: "Of course! I'd be happy to help. What do you need assistance with?",
+    timestamp: new Date(Date.now() - 280000).toISOString(),
+  },
+  {
+    id: '3',
+    role: 'user',
+    text: "I'm trying to understand how to use the chat transcript component.",
+    timestamp: new Date(Date.now() - 240000).toISOString(),
+  },
+  {
+    id: '4',
+    role: 'assistant',
+    text: 'The ChatTranscript component displays a conversation history with support for different message roles, live transcription, and typing indicators. You can customize role labels, timestamps, and styling.',
+    timestamp: new Date(Date.now() - 200000).toISOString(),
+  },
+  {
+    id: '5',
+    role: 'system',
+    text: 'Connection quality: Excellent',
+    timestamp: new Date(Date.now() - 120000).toISOString(),
+  },
+  {
+    id: '6',
+    role: 'user',
+    text: "That's very helpful, thank you!",
+    timestamp: new Date(Date.now() - 60000).toISOString(),
+  },
+]
+
+const meta = {
+  title: 'Domain/ChatTranscript',
+  component: ChatTranscript,
+  tags: ['autodocs'],
+  argTypes: {
+    autoScroll: {
+      control: 'boolean',
+      description: 'Auto-scroll to bottom on new messages',
+    },
+    showTimestamps: {
+      control: 'boolean',
+      description: 'Show timestamps',
+    },
+    relativeTime: {
+      control: 'boolean',
+      description: 'Use relative time format',
+    },
+    showRoleLabels: {
+      control: 'boolean',
+      description: 'Show role labels',
+    },
+    isTyping: {
+      control: 'boolean',
+      description: 'Show typing indicator',
+    },
+    emptyText: {
+      control: 'text',
+      description: 'Empty state text',
+    },
+    maxHeight: {
+      control: 'text',
+      description: 'Maximum height in CSS units',
+    },
+  },
+  args: {
+    messages: sampleMessages,
+    autoScroll: true,
+    showTimestamps: true,
+    relativeTime: true,
+    showRoleLabels: true,
+    isTyping: false,
+  },
+} satisfies Meta<typeof ChatTranscript>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const WithTypingIndicator: Story = {
+  args: {
+    isTyping: true,
+  },
+}
+
+export const WithLiveTranscription: Story = {
+  args: {
+    liveUserText: 'I am currently speaking and this is being transcribed in real-time...',
+  },
+}
+
+export const WithLiveAssistantTranscription: Story = {
+  args: {
+    liveAssistantText: 'The assistant is generating a response and speaking right now...',
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    messages: [],
+    emptyText: 'No messages yet. Start a conversation!',
+  },
+}
+
+export const CustomRoleLabels: Story = {
+  args: {
+    roleLabels: {
+      user: 'Customer',
+      assistant: 'Support Agent',
+      system: 'Notification',
+    },
+  },
+}
+
+export const WithMaxHeight: Story = {
+  name: 'Scrollable Container (Max Height)',
+  args: {
+    messages: [
+      ...sampleMessages,
+      {
+        id: '7',
+        role: 'assistant',
+        text: 'Here is some additional information that makes the conversation longer.',
+        timestamp: new Date(Date.now() - 30000).toISOString(),
+      },
+      {
+        id: '8',
+        role: 'user',
+        text: 'Got it, that makes sense.',
+        timestamp: new Date(Date.now() - 20000).toISOString(),
+      },
+      {
+        id: '9',
+        role: 'assistant',
+        text: 'Great! Is there anything else I can help you with?',
+        timestamp: new Date(Date.now() - 10000).toISOString(),
+      },
+      {
+        id: '10',
+        role: 'user',
+        text: 'No, that is all for now. Thank you!',
+        timestamp: new Date(Date.now() - 5000).toISOString(),
+      },
+    ],
+    maxHeight: '400px',
+  },
+}
+
+export const NoTimestamps: Story = {
+  args: {
+    showTimestamps: false,
+  },
+}
+
+export const NoRoleLabels: Story = {
+  args: {
+    showRoleLabels: false,
+  },
+}
+
+export const AbsoluteTime: Story = {
+  name: 'Absolute Timestamps (not relative)',
+  args: {
+    relativeTime: false,
+  },
+}
+
+export const TranscribingMessages: Story = {
+  name: 'With Transcribing Messages',
+  args: {
+    messages: [
+      ...sampleMessages,
+      {
+        id: '7',
+        role: 'user',
+        text: 'This message is still being transcribed from speech...',
+        timestamp: new Date().toISOString(),
+        isTranscription: true,
+        isFinal: false,
+      },
+    ],
+  },
+}
+
+export const MixedStates: Story = {
+  name: 'Mixed States (Live + Typing + Messages)',
+  args: {
+    messages: sampleMessages.slice(0, 3),
+    liveUserText: 'And then I want to add...',
+    isTyping: false,
+  },
+}
+
+export const WithCustomTypingText: Story = {
+  args: {
+    isTyping: true,
+    typingText: 'AI is thinking...',
+  },
+}
+
+export const LongMessages: Story = {
+  name: 'Long Message Content',
+  args: {
+    messages: [
+      {
+        id: '1',
+        role: 'user',
+        text: 'Can you explain quantum computing in detail?',
+        timestamp: new Date(Date.now() - 120000).toISOString(),
+      },
+      {
+        id: '2',
+        role: 'assistant',
+        text: 'Quantum computing is a revolutionary approach to computation that leverages the principles of quantum mechanics. Unlike classical computers that use bits (0 or 1), quantum computers use quantum bits or qubits, which can exist in multiple states simultaneously through superposition. This allows quantum computers to process vast amounts of information in parallel. Additionally, qubits can be entangled, meaning the state of one qubit can depend on the state of another, regardless of the distance between them. This phenomenon enables quantum computers to solve certain problems exponentially faster than classical computers.',
+        timestamp: new Date(Date.now() - 60000).toISOString(),
+      },
+    ],
+  },
+}
+
+export const InteractiveMessageClick: Story = {
+  name: 'Interactive (Click Messages)',
+  render: (args) => ({
+    components: { ChatTranscript },
+    setup() {
+      const handleMessageClick = (message: ChatMessage) => {
+        alert(`Clicked message: ${message.text}`)
+      }
+      return { args, handleMessageClick }
+    },
+    template: `
+      <ChatTranscript v-bind="args" @message-click="handleMessageClick" />
+    `,
+  }),
+}
+
+export const DarkThemePreview: Story = {
+  name: 'Preview on Dark Background',
+  decorators: [
+    () => ({
+      template: '<div class="dark bg-slate-900 p-6"><story /></div>',
+    }),
+  ],
+}
+
+export const OnlySystemMessages: Story = {
+  name: 'System Messages Only',
+  args: {
+    messages: [
+      {
+        id: '1',
+        role: 'system',
+        text: 'Session started',
+        timestamp: new Date(Date.now() - 300000).toISOString(),
+      },
+      {
+        id: '2',
+        role: 'system',
+        text: 'User joined the conversation',
+        timestamp: new Date(Date.now() - 200000).toISOString(),
+      },
+      {
+        id: '3',
+        role: 'system',
+        text: 'Connection quality improved',
+        timestamp: new Date(Date.now() - 100000).toISOString(),
+      },
+    ],
+  },
+}