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

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

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

@@ -1,59 +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;
-`
+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: calc(16px + var(--platform-agent-thread-header-height, 0px)) 24px 16px;
+`
+
+export const ChatThreadEmpty = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+  padding: 32px 16px;
+  text-align: center;
+`

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

@@ -1,141 +1,147 @@
-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;
-`
+import type { ReactNode } from 'react'
+import { useState } from 'react'
+import { styled } from 'styled-components'
+import { ChevronRight } from 'lucide-react'
+import { CollapsibleGrid } from '../containers/CollapsibleGrid.js'
+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>
+      <StyledDetailsGrid open={open} animationDirection="y" indent={false}>
+        <DetailList>
+          {details!.map(detail => (
+            <li key={detail}>{detail}</li>
+          ))}
+        </DetailList>
+      </StyledDetailsGrid>
+    </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 StyledDetailsGrid = styled(CollapsibleGrid)`
+  z-index: auto;
+  width: 100%;
+`
+
+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

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

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

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