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

package/src/components/common/canvas/useCanvasDragResize.ts

@@ -0,0 +1,161 @@
+import { useCallback, useRef, useState } from 'react'
+import type { PointerEvent as ReactPointerEvent } from 'react'
+import {
+  clientDeltaToCanvas,
+  moveCanvasRect,
+  resizeCanvasRect,
+  type CanvasRect,
+  type CanvasResizeHandle,
+  type CanvasSize,
+  type ViewportRect,
+} from './canvasGeometry.js'
+
+export type CanvasDragKind = 'move' | 'resize'
+
+export interface CanvasDragState {
+  kind: CanvasDragKind
+  frame: CanvasRect
+}
+
+export interface UseCanvasDragResizeOptions {
+  canvas: CanvasSize
+  getViewport: () => ViewportRect | null
+  gridStep?: number
+  minimum?: Pick<CanvasRect, 'w' | 'h'>
+  onPreview?: (frame: CanvasRect) => void
+  onCommit?: (frame: CanvasRect) => void
+}
+
+export interface UseCanvasDragResizeResult {
+  dragState: CanvasDragState | null
+  shouldSuppressClick: boolean
+  beginMove: (
+    frame: CanvasRect,
+    event: ReactPointerEvent<HTMLElement>,
+  ) => void
+  beginResize: (
+    frame: CanvasRect,
+    handle: CanvasResizeHandle,
+    event: ReactPointerEvent<HTMLElement>,
+  ) => void
+  clearClickSuppression: () => void
+  cancelDrag: () => void
+}
+
+export function useCanvasDragResize({
+  canvas,
+  getViewport,
+  gridStep,
+  minimum,
+  onPreview,
+  onCommit,
+}: UseCanvasDragResizeOptions): UseCanvasDragResizeResult {
+  const [dragState, setDragState] = useState<CanvasDragState | null>(null)
+  const [shouldSuppressClick, setShouldSuppressClick] = useState(false)
+  const cleanupRef = useRef<(() => void) | null>(null)
+
+  const cancelDrag = useCallback(() => {
+    cleanupRef.current?.()
+    cleanupRef.current = null
+    setDragState(null)
+  }, [])
+
+  const clearClickSuppression = useCallback(() => {
+    setShouldSuppressClick(false)
+  }, [])
+
+  const begin = useCallback(
+    (
+      kind: CanvasDragKind,
+      frame: CanvasRect,
+      event: ReactPointerEvent<HTMLElement>,
+      handle?: CanvasResizeHandle,
+    ): void => {
+      const viewport = getViewport()
+      if (!viewport) return
+      event.preventDefault()
+      event.stopPropagation()
+      cleanupRef.current?.()
+      const startX = event.clientX
+      const startY = event.clientY
+      let moved = false
+      let latest = frame
+
+      const frameAt = (clientX: number, clientY: number): CanvasRect => {
+        const delta = clientDeltaToCanvas({
+          deltaX: clientX - startX,
+          deltaY: clientY - startY,
+          viewport,
+          canvas,
+        })
+        return kind === 'move'
+          ? moveCanvasRect({ rect: frame, delta, canvas, gridStep })
+          : resizeCanvasRect({
+              rect: frame,
+              delta,
+              handle: handle ?? 'se',
+              canvas,
+              minimum,
+              gridStep,
+            })
+      }
+
+      let onUp: (upEvent: PointerEvent) => void
+      let onCancel: () => void
+      const onMove = (moveEvent: PointerEvent): void => {
+        if (moveEvent.buttons === 0) {
+          onUp(moveEvent)
+          return
+        }
+        if (
+          !moved &&
+          Math.hypot(moveEvent.clientX - startX, moveEvent.clientY - startY) < 3
+        ) {
+          return
+        }
+        moved = true
+        latest = frameAt(moveEvent.clientX, moveEvent.clientY)
+        setDragState({ kind, frame: latest })
+        onPreview?.(latest)
+      }
+      onUp = (upEvent: PointerEvent): void => {
+        window.removeEventListener('pointermove', onMove)
+        window.removeEventListener('pointerup', onUp)
+        window.removeEventListener('pointercancel', onCancel)
+        cleanupRef.current = null
+        setDragState(null)
+        if (!moved) return
+        setShouldSuppressClick(true)
+        latest = frameAt(upEvent.clientX, upEvent.clientY)
+        onCommit?.(latest)
+      }
+      onCancel = (): void => {
+        window.removeEventListener('pointermove', onMove)
+        window.removeEventListener('pointerup', onUp)
+        window.removeEventListener('pointercancel', onCancel)
+        cleanupRef.current = null
+        setDragState(null)
+        onPreview?.(frame)
+      }
+      window.addEventListener('pointermove', onMove)
+      window.addEventListener('pointerup', onUp)
+      window.addEventListener('pointercancel', onCancel)
+      cleanupRef.current = () => {
+        window.removeEventListener('pointermove', onMove)
+        window.removeEventListener('pointerup', onUp)
+        window.removeEventListener('pointercancel', onCancel)
+      }
+    },
+    [canvas, getViewport, gridStep, minimum, onCommit, onPreview],
+  )
+
+  return {
+    dragState,
+    shouldSuppressClick,
+    beginMove: (frame, event) => begin('move', frame, event),
+    beginResize: (frame, handle, event) =>
+      begin('resize', frame, event, handle),
+    clearClickSuppression,
+    cancelDrag,
+  }
+}

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

@@ -0,0 +1,81 @@
+import type { ReactNode } from 'react'
+import { styled } from 'styled-components'
+import { FlexRow } from '../containers/flex.js'
+import { ChatMarkdown } from './ChatMarkdown.js'
+import { formatChatTime } from './chatUtils.js'
+
+export interface ChatAssistantMessageProps {
+  content: string
+  name?: string
+  icon?: ReactNode
+  timestamp?: number
+  streaming?: boolean
+  beforeBody?: ReactNode
+}
+
+export function ChatAssistantMessage({
+  content,
+  name = 'Agent',
+  icon,
+  timestamp,
+  streaming = false,
+  beforeBody,
+}: ChatAssistantMessageProps): React.ReactElement {
+  const hasIcon = Boolean(icon)
+
+  return (
+    <Root>
+      <FlexRow $align="center" $gap="xs" style={{ marginBottom: 4 }}>
+        {hasIcon ? <AvatarSlot>{icon}</AvatarSlot> : null}
+        <Name>{name}</Name>
+        {timestamp ? <Time>{formatChatTime(timestamp)}</Time> : null}
+      </FlexRow>
+      {beforeBody ? (
+        <BeforeBody $hasIcon={hasIcon}>{beforeBody}</BeforeBody>
+      ) : null}
+      <Body $hasIcon={hasIcon} content={content} streaming={streaming} />
+    </Root>
+  )
+}
+
+const Root = styled.div`
+  align-self: flex-start;
+  display: flex;
+  flex-direction: column;
+  max-width: 95%;
+  padding-block: 18px;
+`
+
+const AvatarSlot = styled.div`
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--platform-colors-text-secondary);
+  font-size: 13px;
+`
+
+const Name = styled.span`
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--platform-colors-text-secondary);
+  letter-spacing: 0.04em;
+`
+
+const Time = styled.span`
+  margin-left: auto;
+  color: var(--platform-colors-text-disabled);
+  font-size: 10px;
+`
+
+const BeforeBody = styled.div<{ $hasIcon: boolean }>`
+  padding-left: ${({ $hasIcon }) => ($hasIcon ? '24px' : '0')};
+  margin-bottom: 4px;
+`
+
+const Body = styled(ChatMarkdown)<{ $hasIcon: boolean }>`
+  padding-left: ${({ $hasIcon }) => ($hasIcon ? '24px' : '0')};
+  font-size: 13px;
+`

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

@@ -0,0 +1,189 @@
+import { forwardRef, useCallback } from 'react'
+import { styled } from 'styled-components'
+import { Loader2, Send, Square } from 'lucide-react'
+import { FlexCol } from '../containers/flex.js'
+import { FlexRow } from '../containers/flex.js'
+
+export interface ChatBoxProps {
+  value: string
+  onChange: (value: string) => void
+  onSend: () => void
+  onStop?: () => void
+  sending?: boolean
+  disabled?: boolean
+  placeholder?: string
+  error?: string | null
+  rows?: number
+  leading?: React.ReactNode
+}
+
+export const ChatBox = forwardRef<HTMLTextAreaElement, ChatBoxProps>(
+  function ChatBox(
+    {
+      value,
+      onChange,
+      onSend,
+      onStop,
+      sending = false,
+      disabled = false,
+      placeholder = 'Type a message…',
+      error,
+      rows = 3,
+      leading,
+    },
+    ref,
+  ) {
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (event.key === 'Enter' && !event.shiftKey) {
+          event.preventDefault()
+          if (!disabled && !sending && value.trim()) onSend()
+        }
+      },
+      [disabled, onSend, sending, value],
+    )
+
+    const canSend = !disabled && !sending && value.trim().length > 0
+    const showStop = sending && onStop
+
+    return (
+      <Root $gap="xs">
+        <EditorWrapper>
+          <Textarea
+            ref={ref}
+            value={value}
+            onChange={event => onChange(event.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled || sending}
+            rows={rows}
+          />
+          <Actions $align="center" $justify="between">
+            <div>{leading ?? null}</div>
+            <SendButton
+              type="button"
+              onClick={showStop ? onStop : onSend}
+              disabled={showStop ? false : !canSend}
+              title={showStop ? 'Stop' : 'Send (Enter)'}
+              aria-label={showStop ? 'Stop' : 'Send'}
+            >
+              {showStop ? (
+                <Square size={14} />
+              ) : sending ? (
+                <Loader2 size={14} className="chat-box-spin" />
+              ) : (
+                <Send size={15} />
+              )}
+            </SendButton>
+          </Actions>
+        </EditorWrapper>
+        {error ? <ErrorText role="alert">{error}</ErrorText> : null}
+      </Root>
+    )
+  },
+)
+
+const Root = styled(FlexCol)`
+  flex-shrink: 0;
+  width: 100%;
+`
+
+const EditorWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  background: var(--platform-colors-bg);
+  border: 1px solid var(--platform-colors-border);
+  border-radius: 8px;
+  overflow: hidden;
+  transition: border-color 0.15s;
+
+  &:focus-within {
+    border-color: var(--platform-colors-accent);
+  }
+`
+
+const Textarea = styled.textarea`
+  flex: 1;
+  width: 100%;
+  resize: none;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  padding: 10px 12px 4px;
+  border: none;
+  background: transparent;
+  color: var(--platform-colors-text);
+  outline: none;
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: var(--platform-colors-text-disabled);
+    opacity: 0.7;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--platform-colors-border);
+    border-radius: 3px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`
+
+const Actions = styled(FlexRow)`
+  padding: 4px 8px 8px;
+`
+
+const SendButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--platform-colors-accent);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, opacity 0.15s;
+
+  .chat-box-spin {
+    animation: chat-box-spin 1s linear infinite;
+  }
+
+  @keyframes chat-box-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  &:hover:not(:disabled) {
+    background: color-mix(
+      in srgb,
+      var(--platform-colors-accent) 12%,
+      transparent
+    );
+  }
+
+  &:disabled {
+    color: var(--platform-colors-text-disabled);
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+`
+
+const ErrorText = styled.span`
+  font-size: 11px;
+  color: var(--platform-colors-danger);
+`

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

@@ -0,0 +1,109 @@
+import { useMemo } from 'react'
+import { styled } from 'styled-components'
+import { toHtml } from '../../../editor/index.js'
+
+export interface ChatMarkdownProps {
+  content: string
+  streaming?: boolean
+  className?: string
+}
+
+export function ChatMarkdown({
+  content,
+  streaming = false,
+  className,
+}: ChatMarkdownProps): React.ReactElement | null {
+  const html = useMemo(() => (content ? toHtml(content) : ''), [content])
+
+  if (!content && !streaming) {
+    return null
+  }
+
+  return (
+    <StyledMarkdown
+      className={className}
+      $streaming={streaming}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}
+
+const StyledMarkdown = styled.div<{ $streaming?: boolean }>`
+  color: var(--platform-colors-text);
+  line-height: 1.55;
+  word-break: break-word;
+
+  p {
+    margin: 0 0 6px;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  ul,
+  ol {
+    margin: 4px 0 6px;
+    padding-left: 16px;
+  }
+
+  li {
+    margin-bottom: 2px;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 6px 0;
+    font-size: 11px;
+  }
+
+  th,
+  td {
+    border: 1px solid var(--platform-colors-border);
+    padding: 3px 6px;
+    text-align: left;
+  }
+
+  th {
+    background: var(--platform-colors-surface-raised);
+    font-weight: 600;
+  }
+
+  code {
+    font-family: var(--platform-typography-font-family-mono, monospace);
+    font-size: 0.9em;
+    background: var(--platform-colors-surface-raised);
+    padding: 1px 3px;
+    border-radius: 3px;
+  }
+
+  pre {
+    background: var(--platform-colors-surface-raised);
+    border-radius: 4px;
+    padding: 8px 10px;
+    overflow-x: auto;
+  }
+
+  pre code {
+    background: none;
+    padding: 0;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  &::after {
+    content: ${({ $streaming }) => ($streaming ? "'▋'" : "''")};
+    display: ${({ $streaming }) => ($streaming ? 'inline' : 'none')};
+    margin-left: 1px;
+    animation: chat-stream-cursor 1s step-end infinite;
+  }
+
+  @keyframes chat-stream-cursor {
+    50% {
+      opacity: 0;
+    }
+  }
+`