@speakeasy-api/moonshine 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/components/AIChat/AIChatMessageComposer.tsx

@@ -0,0 +1,175 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react'
+import { cn } from '../../lib/utils'
+import { IconButton } from '../IconButton'
+import { Icon } from '../Icon'
+import { AIChatModelSelector } from './AIChatModelSelector'
+import {
+  DefaultComponents,
+  FcOrClassName,
+  renderComponent,
+} from './componentsTypes'
+import { useAIChat } from './context'
+
+export interface AIChatMessageComposerProps {
+  className?: string
+  components?: Partial<AIChatMessageComposerComponents>
+}
+
+export type AIChatMessageComposerComponents = {
+  submitButton: FcOrClassName<{
+    disabled?: boolean
+    type: 'submit'
+  }>
+  modelSelector: FcOrClassName<{
+    model: string
+    onModelChange: (model: string) => void
+    availableModels: { label: string; value: string }[]
+  }>
+  additionalActions: ReactNode
+}
+
+const defaultComponents: DefaultComponents<AIChatMessageComposerComponents> = {
+  submitButton: ({
+    disabled,
+    type,
+    className,
+  }: {
+    disabled?: boolean
+    type: 'submit'
+    className: string
+  }) => (
+    <IconButton
+      type={type}
+      disabled={disabled}
+      variant="secondary"
+      icon={<Icon name="arrow-up" className="size-4" />}
+      aria-label="Send message"
+      className={cn('h-8 w-8 rounded-[7px]', className)}
+    />
+  ),
+  modelSelector: ({
+    model,
+    onModelChange,
+    availableModels,
+    className,
+  }: {
+    model: string
+    onModelChange: (model: string) => void
+    availableModels: { label: string; value: string }[]
+    className: string
+  }) => (
+    <AIChatModelSelector
+      modelSelector={{ model, onModelChange, availableModels }}
+      /* Inner border radius = outer border radius (rounded-lg = 8px) - border width (1px) = 7px */
+      className={cn('rounded-[7px]', className)}
+    />
+  ),
+  additionalActions: null,
+}
+
+export function AIChatMessageComposer({
+  className,
+  components,
+}: AIChatMessageComposerProps) {
+  const {
+    onSendMessage,
+    isLoading,
+    model,
+    onModelChange,
+    availableModels,
+    initialInput,
+  } = useAIChat()
+  const [message, setMessage] = useState(initialInput || '')
+  const [isFocused, setIsFocused] = useState(false)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  const adjustHeight = () => {
+    const textarea = textareaRef.current
+    if (!textarea) return
+    textarea.style.height = 'auto'
+    textarea.style.height = `${textarea.scrollHeight}px`
+  }
+
+  // Initialize height on mount and adjust on content change
+  useEffect(() => {
+    adjustHeight()
+  }, [message])
+
+  // Set initial input only once when component mounts with an initialInput
+  useEffect(() => {
+    if (initialInput) {
+      setMessage(initialInput)
+    }
+  }, [])
+
+  const handleSubmit = (e?: React.FormEvent) => {
+    e?.preventDefault()
+    if (message.trim() && onSendMessage && !isLoading) {
+      onSendMessage(message)
+      setMessage('')
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto'
+      }
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSubmit()
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={cn('mt-auto p-4', className)}>
+      <div className="flex flex-col">
+        <div
+          className={cn(
+            'flex flex-col overflow-hidden rounded-lg border transition-shadow',
+            isFocused && 'ring-1 ring-offset-1'
+          )}
+        >
+          <textarea
+            ref={textareaRef}
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            placeholder="Send a message..."
+            rows={1}
+            className={cn(
+              'max-h-[300px] min-h-[44px] w-full resize-none bg-transparent px-4 pt-3',
+              // 'text-neutral-50 placeholder:text-neutral-400',
+              'focus:outline-none',
+              'text-sm'
+            )}
+            disabled={isLoading}
+          />
+          <div className="flex items-center justify-between p-3 pt-2">
+            <div className="flex items-center gap-2">
+              {availableModels &&
+                model &&
+                onModelChange &&
+                renderComponent(
+                  defaultComponents,
+                  components,
+                  'modelSelector',
+                  {
+                    model,
+                    onModelChange,
+                    availableModels,
+                  }
+                )}
+              {components?.additionalActions}
+            </div>
+            {renderComponent(defaultComponents, components, 'submitButton', {
+              disabled: !message.trim() || isLoading,
+              type: 'submit',
+            })}
+          </div>
+        </div>
+      </div>
+    </form>
+  )
+}

package/src/components/AIChat/AIChatMessageList.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react'
+import { cn } from '../../lib/utils'
+import { AIChatMessage, AIChatMessageComponents } from './AIChatMessage'
+import { useAIChat } from './context'
+
+export interface AIChatMessageListProps {
+  components?: Partial<AIChatMessageComponents>
+  className?: string
+}
+
+export function AIChatMessageList({
+  components,
+  className,
+}: AIChatMessageListProps) {
+  const { messages } = useAIChat()
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  return (
+    <ul role="log" className={cn('h-full overflow-y-auto', className)}>
+      {messages.map((message) => (
+        <AIChatMessage
+          key={message.id}
+          message={message}
+          components={components}
+        />
+      ))}
+      <div ref={messagesEndRef} />
+    </ul>
+  )
+}

package/src/components/AIChat/AIChatModelSelector.tsx

@@ -0,0 +1,159 @@
+import { useState, useRef, useEffect } from 'react'
+import { cn } from '../../lib/utils'
+import { Icon } from '../Icon'
+import { Popover, PopoverContent, PopoverTrigger } from '../Popover'
+import { AnimatePresence, motion, Variants } from 'motion/react'
+import React from 'react'
+
+interface ModelSelectorConfig {
+  model: string
+  onModelChange: (v: string) => void
+  availableModels: { label: string; value: string }[]
+}
+
+interface AIChatModelSelectorProps {
+  modelSelector?: ModelSelectorConfig
+  className?: string
+}
+
+const AnimatedLabel = React.memo(function AnimatedLabel({
+  label,
+  className = '',
+}: {
+  label: string
+  className?: string
+}) {
+  const parent = {
+    visible: {
+      transition: { staggerChildren: 0.03 },
+    },
+  }
+
+  const char: Variants = {
+    hidden: { opacity: 0, y: 10, filter: 'blur(4px)' },
+    visible: {
+      opacity: 1,
+      y: 0,
+      filter: 'blur(0px)',
+      transition: { duration: 0.32, ease: [0.4, 0, 0.2, 1] },
+    },
+    exit: { opacity: 0, y: -10, filter: 'blur(4px)' },
+  }
+
+  return (
+    <motion.span
+      className={cn('inline-flex', className)}
+      variants={parent}
+      initial="hidden"
+      animate="visible"
+      exit="hidden"
+      style={{ willChange: 'transform, opacity' }}
+    >
+      {label.split('').map((c, i) => (
+        <motion.span
+          key={`${label}-${i}`}
+          variants={char}
+          className="block"
+          style={{ willChange: 'transform, opacity' }}
+        >
+          {c === ' ' ? '\u00A0' : c}
+        </motion.span>
+      ))}
+    </motion.span>
+  )
+})
+
+export function AIChatModelSelector({
+  modelSelector,
+  className,
+}: AIChatModelSelectorProps) {
+  if (!modelSelector) return null
+  const { model, onModelChange, availableModels } = modelSelector
+  const [open, setOpen] = useState(false)
+  const current = availableModels.find((m) => m.value === model) || {
+    label: 'Unknown',
+    value: '',
+  }
+
+  const prevLabelRef = useRef(current.label)
+  const [outgoingLabel, setOutgoingLabel] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (current.label !== prevLabelRef.current) {
+      const prev = prevLabelRef.current
+      prevLabelRef.current = current.label
+
+      setOutgoingLabel(prev)
+
+      requestAnimationFrame(() => {
+        setOutgoingLabel(null)
+      })
+    }
+  }, [current.label])
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            'flex h-8 items-center rounded-md px-1 text-xs',
+            className
+          )}
+        >
+          <motion.div
+            layout
+            transition={{ type: 'spring', stiffness: 320, damping: 50 }}
+            className="relative inline-flex items-center gap-1 overflow-hidden whitespace-nowrap"
+          >
+            <AnimatePresence initial={false}>
+              {outgoingLabel && (
+                <motion.div
+                  initial={{ opacity: 1 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.18 }}
+                  className="pointer-events-none absolute top-0 left-0 select-none"
+                >
+                  <AnimatedLabel key={outgoingLabel} label={outgoingLabel} />
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            <AnimatedLabel key={current.value} label={current.label} />
+
+            <span>
+              <Icon name="chevron-down" className="size-3" />
+            </span>
+          </motion.div>
+        </button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        align="start"
+        className="w-[220px] rounded-[7px] border p-0 shadow-lg"
+        side="top"
+        sideOffset={8}
+      >
+        <div className="flex flex-col py-1">
+          {availableModels.map((m) => (
+            <button
+              key={m.value}
+              type="button"
+              onClick={() => {
+                onModelChange(m.value)
+                setOpen(false)
+              }}
+              className={cn(
+                'flex items-center justify-between gap-2 px-5 py-2 text-xs transition-colors'
+              )}
+            >
+              <span>{m.label}</span>
+              {m.value === model && <Icon name="check" className="size-3" />}
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/components/AIChat/componentsTypes.ts

@@ -0,0 +1,36 @@
+import { createElement, FunctionComponent, ReactNode } from 'react'
+
+type ClassName = string
+
+export type FcOrClassName<P> = FunctionComponent<P> | ClassName
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type BaseComponents = Record<string, FcOrClassName<any> | ReactNode>
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type FC = FunctionComponent<any>
+
+export type DefaultComponents<T extends BaseComponents> = {
+  [key in keyof T]: T[key] extends FcOrClassName<infer P>
+    ? FunctionComponent<P & { className: string }>
+    : T[key]
+}
+
+export const renderComponent = <T extends BaseComponents, K extends keyof T>(
+  defaultComponents: DefaultComponents<T>,
+  userComponents: Partial<T> | undefined,
+  key: K,
+  props: T[K] extends FcOrClassName<infer P> ? P : never
+): ReactNode => {
+  const userComponent = userComponents?.[key]
+  if (typeof userComponent === 'function') {
+    const Component = userComponent as FC
+    return createElement(Component, props)
+  }
+
+  // Default component handling
+  const DefaultComponent = defaultComponents[key] as FC
+  return createElement(DefaultComponent, {
+    ...(props as object),
+    className: typeof userComponent === 'string' ? userComponent : '',
+  })
+}

package/src/components/AIChat/context.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react'
+import type { AIChatContextValue } from './types'
+
+export const AIChatContext = createContext<AIChatContextValue>({
+  messages: [],
+  isLoading: false,
+})
+
+export const useAIChat = () => {
+  const context = useContext(AIChatContext)
+  if (!context) {
+    throw new Error('useAIChat must be used within an AIChatProvider')
+  }
+  return context
+}

package/src/components/AIChat/index.ts

@@ -0,0 +1,12 @@
+export * from './AIChatContainer'
+export * from './AIChatMessageList'
+export * from './AIChatMessage'
+export * from './AIChatMessageComposer'
+export * from './parts/AIChatMessageTextPart'
+export * from './parts/AIChatMessageReasoningPart'
+export * from './parts/AIChatMessageToolInvocationPart'
+export * from './parts/AIChatMessageToolResultPart'
+export * from './parts/AIChatMessageFilePart'
+export * from './parts/AIChatMessageSourcePart'
+export * from './types'
+export * from './context'

package/src/components/AIChat/parts/AIChatMessageFilePart.tsx

@@ -0,0 +1,129 @@
+import { cn } from '../../../lib/utils'
+import { Text } from '../../Text/index'
+import type { BasePartProps } from '../types'
+
+export interface AIChatMessageFilePartProps extends BasePartProps {
+  mimeType: string
+  data: string
+  fileName?: string
+}
+
+export function AIChatMessageFilePart({
+  mimeType,
+  data,
+  fileName,
+  className,
+}: AIChatMessageFilePartProps) {
+  // Determine file icon based on mime type
+  const getFileIcon = () => {
+    if (mimeType.startsWith('image/')) {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+          />
+        </svg>
+      )
+    } else if (mimeType.startsWith('video/')) {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
+          />
+        </svg>
+      )
+    } else if (mimeType.startsWith('audio/')) {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
+          />
+        </svg>
+      )
+    } else {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+          />
+        </svg>
+      )
+    }
+  }
+
+  // Create a download link for the file
+  const downloadUrl = `data:${mimeType};base64,${data}`
+
+  return (
+    <div
+      className={cn(
+        'rounded-md border border-neutral-600 bg-neutral-800 p-3',
+        className
+      )}
+    >
+      <div className="mb-2 flex items-center gap-2">
+        <div className="text-neutral-400">{getFileIcon()}</div>
+        <Text variant="sm" className="font-medium text-neutral-50">
+          {fileName || 'File Attachment'}
+        </Text>
+      </div>
+      <a
+        href={downloadUrl}
+        download={fileName}
+        className="text-brand-yellow-300 hover:text-brand-yellow-200 inline-flex items-center gap-1"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+          />
+        </svg>
+        <Text variant="sm">Download</Text>
+      </a>
+    </div>
+  )
+}

package/src/components/AIChat/parts/AIChatMessageReasoningPart.tsx

@@ -0,0 +1,23 @@
+import { cn } from '../../../lib/utils'
+import { Text } from '../../Text'
+import type { BasePartProps } from '../types'
+
+export interface AIChatMessageReasoningPartProps extends BasePartProps {
+  reasoning: string
+}
+
+export function AIChatMessageReasoningPart({
+  reasoning,
+  className,
+}: AIChatMessageReasoningPartProps) {
+  return (
+    <div className={cn('rounded-md bg-neutral-800 p-3', className)}>
+      <Text variant="sm" className="mb-1 font-medium text-neutral-50">
+        Reasoning:
+      </Text>
+      <Text variant="sm" className="whitespace-pre-wrap text-neutral-200">
+        {reasoning}
+      </Text>
+    </div>
+  )
+}

package/src/components/AIChat/parts/AIChatMessageSourcePart.tsx

@@ -0,0 +1,58 @@
+import { cn } from '../../../lib/utils'
+import { Text } from '../../Text'
+import type { BasePartProps } from '../types'
+
+export interface AIChatMessageSourcePartProps extends BasePartProps {
+  source: {
+    id: string
+    url: string
+    title?: string
+  }
+}
+
+export function AIChatMessageSourcePart({
+  source,
+  className,
+}: AIChatMessageSourcePartProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-md border border-neutral-600 bg-neutral-800 p-3',
+        className
+      )}
+    >
+      <div className="mb-1 flex items-center gap-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-4 w-4 text-neutral-400"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <Text variant="sm" className="font-medium text-neutral-50">
+          Source Reference
+        </Text>
+      </div>
+      <div className="mt-2">
+        <a
+          href={source.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-brand-yellow-300 hover:text-brand-yellow-200 block hover:underline"
+        >
+          <Text variant="sm">{source.title || source.url}</Text>
+        </a>
+        <Text variant="sm" className="mt-1 block text-neutral-400">
+          ID: {source.id}
+        </Text>
+      </div>
+    </div>
+  )
+}

package/src/components/AIChat/parts/AIChatMessageTextPart.tsx

@@ -0,0 +1,33 @@
+import { cn } from '../../../lib/utils'
+import type { BasePartProps } from '../types'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+export interface AIChatMessageTextPartProps extends BasePartProps {
+  text: string
+}
+
+// The line-heights here have been left as the prose defaults for now, ideally they should be adjusted to match the design system
+export function AIChatMessageTextPart({
+  text,
+  className,
+}: AIChatMessageTextPartProps) {
+  return (
+    <div
+      className={cn(
+        'prose prose-sm dark:prose-invert min-w-0 break-words',
+        'prose-headings:font-light prose-headings:tracking-[0.0015em]',
+        'prose-h1:text-heading-xl',
+        'prose-h2:text-heading-lg',
+        'prose-h3:text-heading-md',
+        'prose-h4:text-heading-sm',
+        'prose-h5:text-heading-xs',
+        'prose-p:font-normal prose-p:tracking-[0.0025em]',
+        'prose-a:text-link prose-a:font-normal prose-a:underline-offset-4 prose-a:decoration-1 prose-a:tracking-[0.0025em]',
+        className
+      )}
+    >
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>
+    </div>
+  )
+}