@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1

package/src/components/common/chat/ChatModelMenu.tsx

@@ -0,0 +1,258 @@
+import { ChevronDown } from 'lucide-react'
+import { useMemo } from 'react'
+import { styled } from 'styled-components'
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import { SelectMenuControl } from '../dropdown/SelectMenuControl.js'
+import type { SelectMenuPlacement } from '../dropdown/SelectMenu.js'
+import { useSelectMenuAnchor } from '../dropdown/useSelectMenuAnchor.js'
+
+export interface ChatModelMenuOption {
+  value: string
+  label: string
+  disabled?: boolean
+  contextWindowTokens?: number
+  supportsImageInput?: boolean
+}
+
+export interface ChatModelMenuProps {
+  value: string
+  options: readonly ChatModelMenuOption[]
+  onSelect: (value: string) => void
+  disabled?: boolean
+  menuPlacement?: SelectMenuPlacement
+  /** Fixed trigger label for action menus (ignores selected option label). */
+  triggerLabel?: string
+  /** Split trigger: label button runs this action; chevron opens the menu. */
+  primaryActionLabel?: string
+  onPrimaryAction?: () => void
+  'aria-label'?: string
+}
+
+const StyledWrap = styled.div`
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+`
+
+const StyledTrigger = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  max-width: 180px;
+  padding: 2px 6px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--platform-colors-text-secondary);
+  font-size: 11px;
+  line-height: 1.3;
+  cursor: pointer;
+  min-width: 0;
+  transition: background 0.15s, color 0.15s;
+
+  &:hover:not(:disabled) {
+    background: rgb(from var(--platform-colors-text) r g b / 0.05);
+    color: var(--platform-colors-text);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`
+
+const StyledLabel = styled.span`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledSplitWrap = styled.div`
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  min-width: 0;
+
+  > button:first-of-type {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > button:last-of-type {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    padding-inline: 4px;
+  }
+`
+
+const StyledTriggerChevron = styled(StyledTrigger)`
+  max-width: none;
+  padding-inline: 4px;
+`
+
+export function ChatModelMenu({
+  value,
+  options,
+  onSelect,
+  disabled = false,
+  menuPlacement = 'above',
+  triggerLabel,
+  primaryActionLabel,
+  onPrimaryAction,
+  'aria-label': ariaLabel = 'Model',
+}: ChatModelMenuProps): React.ReactElement {
+  const { anchorRef, open, close, toggle } =
+    useSelectMenuAnchor<HTMLButtonElement>({
+      disabled,
+    })
+  const current = useMemo(
+    () => options.find(option => option.value === value),
+    [options, value],
+  )
+  const splitPrimary =
+    primaryActionLabel && onPrimaryAction && options.length > 0
+
+  if (splitPrimary) {
+    return (
+      <StyledSplitWrap onClick={event => event.stopPropagation()}>
+        <StyledTrigger
+          type="button"
+          disabled={disabled}
+          aria-label={primaryActionLabel}
+          title={primaryActionLabel}
+          onClick={onPrimaryAction}
+        >
+          <StyledLabel>{primaryActionLabel}</StyledLabel>
+        </StyledTrigger>
+        <StyledTriggerChevron
+          ref={anchorRef}
+          type="button"
+          disabled={disabled}
+          aria-haspopup="menu"
+          aria-expanded={open}
+          aria-label={`${primaryActionLabel} options`}
+          data-platform-menu-trigger
+          title={`${primaryActionLabel} options`}
+          onClick={toggle}
+        >
+          <PlatformIcon icon={ChevronDown} size={12} strokeWidth={1.75} />
+        </StyledTriggerChevron>
+        <SelectMenuControl
+          anchorRef={anchorRef}
+          open={open}
+          placement={menuPlacement}
+          panelVariant="quiet"
+          minWidth={160}
+          aria-label={ariaLabel}
+          onClose={close}
+        >
+          {menuClose => (
+            <ModelMenuOptions
+              options={options}
+              value={value}
+              onValueChange={onSelect}
+              onClose={menuClose}
+            />
+          )}
+        </SelectMenuControl>
+      </StyledSplitWrap>
+    )
+  }
+
+  return (
+    <StyledWrap onClick={event => event.stopPropagation()}>
+      <StyledTrigger
+        ref={anchorRef}
+        type="button"
+        disabled={disabled}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={ariaLabel}
+        data-platform-menu-trigger
+        title={triggerLabel ?? current?.label ?? ariaLabel}
+        onClick={toggle}
+      >
+        <StyledLabel>{triggerLabel ?? current?.label ?? 'Model'}</StyledLabel>
+        <PlatformIcon icon={ChevronDown} size={12} strokeWidth={1.75} />
+      </StyledTrigger>
+      <SelectMenuControl
+        anchorRef={anchorRef}
+        open={open}
+        placement={menuPlacement}
+        panelVariant="quiet"
+        minWidth={160}
+        aria-label={ariaLabel}
+        onClose={close}
+      >
+        {menuClose => (
+          <ModelMenuOptions
+            options={options}
+            value={value}
+            onValueChange={onSelect}
+            onClose={menuClose}
+          />
+        )}
+      </SelectMenuControl>
+    </StyledWrap>
+  )
+}
+
+function ModelMenuOptions({
+  options,
+  value,
+  onValueChange,
+  onClose,
+}: {
+  options: readonly ChatModelMenuOption[]
+  value: string
+  onValueChange: (value: string) => void
+  onClose: () => void
+}): React.ReactElement {
+  return (
+    <>
+      {options.map(option => (
+        <StyledOption
+          key={option.value}
+          type="button"
+          role="menuitem"
+          disabled={option.disabled}
+          $selected={option.value === value}
+          onClick={() => {
+            if (option.disabled) return
+            onValueChange(option.value)
+            onClose()
+          }}
+        >
+          <StyledOptionLabel>{option.label}</StyledOptionLabel>
+        </StyledOption>
+      ))}
+    </>
+  )
+}
+
+const StyledOption = styled.button<{ $selected?: boolean }>`
+  display: flex;
+  width: 100%;
+  min-width: 220px;
+  align-items: center;
+  padding: 7px 8px;
+  border: none;
+  border-radius: var(--platform-radius-sm);
+  background: ${({ $selected }) =>
+    $selected ? 'var(--platform-colors-surface-hover)' : 'transparent'};
+  color: var(--platform-colors-text);
+  font: inherit;
+  text-align: left;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.48 : 1)};
+
+  &:hover:not(:disabled) {
+    background: var(--platform-colors-surface-hover);
+  }
+`
+
+const StyledOptionLabel = styled.span`
+  font-size: var(--platform-typography-font-size-sm);
+  line-height: 1.25;
+`

package/src/components/common/chat/ChatStatusRow.tsx

@@ -0,0 +1,24 @@
+import { styled } from 'styled-components'
+
+export interface ChatStatusRowProps {
+  text: string
+  variant?: 'default' | 'error'
+}
+
+export function ChatStatusRow({
+  text,
+  variant = 'default',
+}: ChatStatusRowProps): React.ReactElement {
+  return <Root $variant={variant}>{text}</Root>
+}
+
+const Root = styled.span<{ $variant: 'default' | 'error' }>`
+  align-self: flex-start;
+  color: ${({ $variant }) =>
+    $variant === 'error'
+      ? 'var(--platform-colors-danger)'
+      : 'var(--platform-colors-text-disabled)'};
+  font-size: 11px;
+  font-style: italic;
+  line-height: 1.4;
+`

package/src/components/common/chat/ChatThinkingIndicator.tsx

@@ -0,0 +1,54 @@
+import { keyframes, styled } from 'styled-components'
+import { FlexRow } from '../containers/flex.js'
+
+export interface ChatThinkingIndicatorProps {
+  label?: string
+}
+
+export function ChatThinkingIndicator({
+  label = 'Thinking',
+}: ChatThinkingIndicatorProps): React.ReactElement {
+  return (
+    <FlexRow $align="center" $gap="xs" style={{ alignSelf: 'flex-start' }}>
+      <Label>{label}</Label>
+      <Dots aria-hidden="true">
+        <span />
+        <span />
+        <span />
+      </Dots>
+    </FlexRow>
+  )
+}
+
+const dot = keyframes`
+  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
+  40%            { opacity: 1;    transform: translateY(-2px); }
+`
+
+const Label = styled.span`
+  color: var(--platform-colors-text-disabled);
+  font-size: 12px;
+`
+
+const Dots = styled.span`
+  display: inline-flex;
+  align-items: center;
+
+  span {
+    animation: ${dot} 1.2s ease-in-out infinite;
+    background: var(--platform-colors-text-disabled);
+    border-radius: 50%;
+    display: inline-block;
+    height: 3px;
+    margin-left: 3px;
+    width: 3px;
+
+    &:nth-child(2) {
+      animation-delay: 0.15s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.3s;
+    }
+  }
+`

package/src/components/common/chat/ChatThread.tsx

@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react'
+import { useEffect, useRef } from 'react'
+import { styled } from 'styled-components'
+
+export interface ChatThreadProps {
+  children: ReactNode
+  emptyMessage?: ReactNode
+  footer?: ReactNode
+  scrollKey?: string | number
+  className?: string
+}
+
+export function ChatThread({
+  children,
+  emptyMessage,
+  footer,
+  scrollKey,
+  className,
+}: ChatThreadProps): React.ReactElement {
+  const endRef = useRef<HTMLDivElement>(null)
+  const rafRef = useRef<number>(0)
+
+  useEffect(() => {
+    if (rafRef.current) cancelAnimationFrame(rafRef.current)
+    rafRef.current = requestAnimationFrame(() => {
+      endRef.current?.scrollIntoView({ behavior: 'smooth' })
+    })
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current)
+    }
+  }, [children, scrollKey, footer])
+
+  return (
+    <Container className={className}>
+      {emptyMessage}
+      {children}
+      {footer}
+      <div ref={endRef} />
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px 24px;
+`
+
+export const ChatThreadEmpty = styled.div`
+  color: var(--platform-colors-text-disabled);
+  font-size: 13px;
+  line-height: 1.5;
+  padding: 32px 16px;
+  text-align: center;
+`

package/src/components/common/chat/ChatToolRow.tsx

@@ -0,0 +1,141 @@
+import type { ReactNode } from 'react'
+import { useState } from 'react'
+import { styled } from 'styled-components'
+import { ChevronRight } from 'lucide-react'
+import { FlexRow } from '../containers/flex.js'
+import { formatChatTime } from './chatUtils.js'
+
+export interface ChatToolRowProps {
+  icon: ReactNode
+  title?: string
+  summary?: string
+  details?: string[]
+  timestamp?: number
+}
+
+export function ChatToolRow({
+  icon,
+  title,
+  summary,
+  details,
+  timestamp,
+}: ChatToolRowProps): React.ReactElement {
+  const [open, setOpen] = useState(false)
+  const hasDetails = Boolean(details?.length)
+
+  const header = (
+    <FlexRow $align="center" $gap="xs" style={{ minWidth: 0, flex: 1 }}>
+      <Ico>{icon}</Ico>
+      {title ? <Name>{title}</Name> : null}
+      {summary ? <Summary>{summary}</Summary> : null}
+      {timestamp ? <Ts>{formatChatTime(timestamp)}</Ts> : null}
+    </FlexRow>
+  )
+
+  if (!hasDetails) {
+    return <Plain>{header}</Plain>
+  }
+
+  return (
+    <Expandable>
+      <HeaderButton
+        type="button"
+        onClick={() => setOpen(value => !value)}
+        aria-expanded={open}
+      >
+        <Chevron $open={open} size={12} aria-hidden />
+        {header}
+      </HeaderButton>
+      {open ? (
+        <DetailList>
+          {details!.map(detail => (
+            <li key={detail}>{detail}</li>
+          ))}
+        </DetailList>
+      ) : null}
+    </Expandable>
+  )
+}
+
+const Ico = styled.span`
+  color: var(--platform-colors-text-secondary);
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 11px;
+`
+
+const Name = styled.span`
+  color: var(--platform-colors-text);
+  flex: 0 0 auto;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+`
+
+const Summary = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: 12px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const Ts = styled.span`
+  color: var(--platform-colors-text-disabled);
+  flex: 0 0 auto;
+  font-size: 10px;
+  margin-left: auto;
+  white-space: nowrap;
+`
+
+const Plain = styled.div`
+  align-self: flex-start;
+  border-radius: 6px;
+  width: 100%;
+  padding: 5px 10px;
+
+  &:hover {
+    background: rgb(from var(--platform-colors-text) r g b / 0.04);
+  }
+`
+
+const Expandable = styled.div`
+  align-self: flex-start;
+  border-radius: 6px;
+  width: 100%;
+
+  &:hover {
+    background: rgb(from var(--platform-colors-text) r g b / 0.04);
+  }
+`
+
+const HeaderButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  padding: 5px 8px 5px 10px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+`
+
+const Chevron = styled(ChevronRight)<{ $open: boolean }>`
+  flex: 0 0 auto;
+  color: var(--platform-colors-text-secondary);
+  transition: transform 0.2s ease;
+  transform: rotate(${({ $open }) => ($open ? '90deg' : '0deg')});
+`
+
+const DetailList = styled.ul`
+  color: var(--platform-colors-text-secondary);
+  display: flex;
+  flex-direction: column;
+  font-size: 11px;
+  gap: 2px;
+  list-style: none;
+  margin: 0;
+  padding: 4px 18px 6px 28px;
+`

package/src/components/common/chat/ChatUserBubble.tsx

@@ -0,0 +1,45 @@
+import { styled } from 'styled-components'
+import { formatChatTime } from './chatUtils.js'
+
+export interface ChatUserBubbleProps {
+  text: string
+  timestamp?: number
+}
+
+export function ChatUserBubble({
+  text,
+  timestamp,
+}: ChatUserBubbleProps): React.ReactElement {
+  return (
+    <Root>
+      <Bubble>{text}</Bubble>
+      {timestamp ? <Time>{formatChatTime(timestamp)}</Time> : null}
+    </Root>
+  )
+}
+
+const Root = styled.div`
+  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 3px;
+  max-width: 82%;
+`
+
+const Bubble = styled.div`
+  background: var(--platform-colors-accent-muted);
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 12px 12px 2px 12px;
+  color: var(--platform-colors-text);
+  font-size: 13px;
+  line-height: 1.5;
+  padding: 8px 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+`
+
+const Time = styled.span`
+  color: var(--platform-colors-text-disabled);
+  font-size: 10px;
+`

package/src/components/common/chat/chatUtils.ts

@@ -0,0 +1,7 @@
+export function formatChatTime(timestamp?: number): string {
+  if (!timestamp) return ''
+  return new Date(timestamp).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}

package/src/components/common/chat/index.ts

@@ -0,0 +1,24 @@
+export { ChatBox, type ChatBoxProps } from './ChatBox.js'
+export {
+  ChatModelMenu,
+  type ChatModelMenuProps,
+  type ChatModelMenuOption,
+} from './ChatModelMenu.js'
+export {
+  ChatThread,
+  ChatThreadEmpty,
+  type ChatThreadProps,
+} from './ChatThread.js'
+export { ChatUserBubble, type ChatUserBubbleProps } from './ChatUserBubble.js'
+export {
+  ChatAssistantMessage,
+  type ChatAssistantMessageProps,
+} from './ChatAssistantMessage.js'
+export { ChatMarkdown, type ChatMarkdownProps } from './ChatMarkdown.js'
+export {
+  ChatThinkingIndicator,
+  type ChatThinkingIndicatorProps,
+} from './ChatThinkingIndicator.js'
+export { ChatStatusRow, type ChatStatusRowProps } from './ChatStatusRow.js'
+export { ChatToolRow, type ChatToolRowProps } from './ChatToolRow.js'
+export { formatChatTime } from './chatUtils.js'