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

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

@@ -1,258 +1,290 @@
-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;
-`
+import { ChevronDown } from 'lucide-react'
+import { Fragment, 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
+  groupLabel?: string
+  meta?: 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 {
+  let lastGroup: string | undefined
+  return (
+    <>
+      {options.map(option => {
+        const showGroup =
+          option.groupLabel !== undefined && option.groupLabel !== lastGroup
+        lastGroup = option.groupLabel
+        return (
+          <Fragment key={option.value}>
+            {showGroup ? (
+              <StyledOptionGroup>{option.groupLabel}</StyledOptionGroup>
+            ) : null}
+            <StyledOption
+              type="button"
+              role="menuitem"
+              disabled={option.disabled}
+              $selected={option.value === value}
+              onClick={() => {
+                if (option.disabled) return
+                onValueChange(option.value)
+                onClose()
+              }}
+            >
+              <StyledOptionLabel>{option.label}</StyledOptionLabel>
+              {option.meta ? (
+                <StyledOptionMeta>{option.meta}</StyledOptionMeta>
+              ) : null}
+            </StyledOption>
+          </Fragment>
+        )
+      })}
+    </>
+  )
+}
+
+const StyledOption = styled.button<{ $selected?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+  min-width: 220px;
+  align-items: flex-start;
+  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;
+`
+
+const StyledOptionMeta = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: 11px;
+  line-height: 1.25;
+`
+
+const StyledOptionGroup = styled.div`
+  padding: 8px 8px 3px;
+  color: var(--platform-colors-text-secondary);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+`

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

@@ -1,24 +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;
-`
+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;
+`