@pstdio/ui 0.0.3 → 0.1.0

package/src/components/chat-ui/components/message-types.ts

@@ -1,40 +0,0 @@
-import type { SessionMessage, SessionMessagePart, ToolPart } from "../agent-types";
-
-export type { SessionMessage, SessionMessagePart, ToolPart };
-
-export type MessageOrigin = "user" | "assistant" | "developer";
-
-export const getMessageOrigin = (role: string): MessageOrigin => {
-  if (role === "user" || role === "assistant" || role === "developer") return role;
-  return "assistant";
-};
-
-export const isReasoningToolOnlyMessage = (message: SessionMessage) => {
-  const parts = message.parts ?? [];
-  if (parts.length === 0) return false;
-
-  const hasTextPart = parts.some((part) => part.type === "text" && "text" in part);
-  if (hasTextPart) return false;
-
-  return parts.some((part) => part.type === "reasoning" || part.type === "tool");
-};
-
-export const mergeReasoningToolOnlyMessages = (messages: SessionMessage[]) => {
-  const merged: SessionMessage[] = [];
-
-  for (const message of messages) {
-    const previous = merged[merged.length - 1];
-
-    if (previous && previous.role === message.role && isReasoningToolOnlyMessage(message)) {
-      previous.parts = [...(previous.parts ?? []), ...(message.parts ?? [])];
-      continue;
-    }
-
-    merged.push({
-      ...message,
-      parts: [...(message.parts ?? [])],
-    });
-  }
-
-  return merged;
-};

package/src/components/chat-ui/components/model-swap-separator.stories.tsx

@@ -1,27 +0,0 @@
-import { Box } from "@chakra-ui/react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { ModelSwapSeparator } from "./model-swap-separator";
-
-const meta: Meta<typeof ModelSwapSeparator> = {
-  title: "Chat UI/Model Swap Separator",
-  component: ModelSwapSeparator,
-  parameters: {
-    layout: "padded",
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ModelSwapSeparator>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Box maxW="960px" w="full" borderWidth="1px" borderRadius="md" bg="bg" p="md">
-      <ModelSwapSeparator {...args} />
-    </Box>
-  ),
-  args: {
-    fromModel: "GPT-5.3-Codex",
-    toModel: "GPT-5.2",
-  },
-};

package/src/components/chat-ui/components/model-swap-separator.tsx

@@ -1,20 +0,0 @@
-import { HStack, Separator, Text } from "@chakra-ui/react";
-
-export interface ModelSwapSeparatorProps {
-  fromModel: string;
-  toModel: string;
-}
-
-export const ModelSwapSeparator = (props: ModelSwapSeparatorProps) => {
-  const { fromModel, toModel } = props;
-
-  return (
-    <HStack width="full" gap="xs" py="xs" align="center">
-      <Separator flex="1" variant="dashed" />
-      <Text textStyle="label/XS/regular" color="fg.muted" textAlign="center" flexShrink="0">
-        Model changed from {fromModel} to {toModel}.
-      </Text>
-      <Separator flex="1" variant="dashed" />
-    </HStack>
-  );
-};

package/src/components/chat-ui/components/send-button.tsx

@@ -1,56 +0,0 @@
-import { IconButton, type IconButtonProps, Kbd, Portal, Tooltip } from "@chakra-ui/react";
-import { ArrowUp, Square } from "lucide-react";
-
-export interface SendButtonProps extends IconButtonProps {
-  shortcut?: string;
-  title?: string;
-  canInterrupt: boolean;
-}
-
-export const SendButton = (props: SendButtonProps) => {
-  const { title, shortcut, canInterrupt, ...rest } = props;
-  const ariaLabel = rest["aria-label"] ?? title;
-
-  const icon = canInterrupt ? (
-    <Square size={16} strokeWidth={2} fill="currentColor" />
-  ) : (
-    <ArrowUp size={16} strokeWidth={2} />
-  );
-
-  const button = (
-    <IconButton
-      size="sm"
-      variant="solid"
-      borderRadius="full"
-      colorPalette="primary"
-      aria-label={ariaLabel}
-      title={title}
-      {...rest}
-    >
-      {icon}
-    </IconButton>
-  );
-
-  if (title) {
-    const tooltipContent = shortcut ? (
-      <>
-        {title} <Kbd fontSize="xs">{shortcut}</Kbd>
-      </>
-    ) : (
-      title
-    );
-
-    return (
-      <Tooltip.Root closeDelay={50} openDelay={100}>
-        <Tooltip.Trigger asChild>{button}</Tooltip.Trigger>
-        <Portal>
-          <Tooltip.Positioner>
-            <Tooltip.Content>{tooltipContent}</Tooltip.Content>
-          </Tooltip.Positioner>
-        </Portal>
-      </Tooltip.Root>
-    );
-  }
-
-  return button;
-};

package/src/components/chat-ui/components/timeline.tsx

@@ -1,414 +0,0 @@
-import { Avatar, Box, Button, Card, Timeline as ChakraTimeline, Link, Span, Stack, Text } from "@chakra-ui/react";
-import { ChevronUpIcon } from "lucide-react";
-import type { MouseEvent, ReactNode } from "react";
-import { useState } from "react";
-import { DiffBubble } from "@/components/diff-bubble";
-import { DiffEditor } from "@/components/diff-editor";
-import { ResourceBadge } from "@/components/resource-badge";
-import type { IconName } from "../utils/get-icon";
-import { getIconComponent } from "../utils/get-icon";
-
-export const Timeline = ChakraTimeline;
-
-export type TimelineDoc = {
-  items: Item[];
-};
-
-export type Item = {
-  id?: string;
-  timestamp?: string;
-  indicator?: Indicator;
-  title: TitleSegment[];
-  blocks?: Block[];
-  expandable?: boolean;
-};
-
-export type Indicator =
-  | { type: "icon"; icon: IconName; color?: string }
-  | { type: "avatar"; src: string; alt?: string }
-  | { type: "none" };
-
-export type TitleSegment =
-  | { kind: "text"; text: string; bold?: boolean; muted?: boolean }
-  | { kind: "avatar"; src: string; alt?: string }
-  | { kind: "diff"; fileName: string; filePath?: string; additions?: number; deletions?: number }
-  | {
-      kind: "link";
-      text: string;
-      href?: string;
-      filePath?: string;
-      bold?: boolean;
-      muted?: boolean;
-      variant?: "default" | "bubble";
-    };
-
-export type Block =
-  | { type: "comment"; text: string; reactions?: { clap?: number } }
-  | { type: "code"; language: string; code: string; editable?: boolean }
-  | { type: "diff"; language?: string; original: string; modified: string; sideBySide?: boolean }
-  | { type: "input"; placeholder?: string }
-  | { type: "text"; text: string }
-  | { type: "references"; references: string[] }
-  | { type: "component"; render: (ctx: { onOpenFile?: (filePath: string) => void }) => ReactNode };
-
-const handleTitleLinkClick = (
-  event: MouseEvent<HTMLAnchorElement>,
-  seg: Extract<TitleSegment, { kind: "link" }>,
-  onOpenFile?: (filePath: string) => void,
-  stopPropagation = false,
-) => {
-  if (stopPropagation) {
-    event.stopPropagation();
-  }
-
-  if (!seg.href) {
-    event.preventDefault();
-  }
-  if (seg.filePath) {
-    onOpenFile?.(seg.filePath);
-  }
-};
-
-function AvatarTitleSegment({ seg }: { seg: Extract<TitleSegment, { kind: "avatar" }> }) {
-  return (
-    <Avatar.Root width="1.5rem" height="1.5rem">
-      <Avatar.Image src={seg.src} alt={seg.alt} />
-      <Avatar.Fallback />
-    </Avatar.Root>
-  );
-}
-
-function DiffTitleSegment({
-  seg,
-  onOpenFile,
-}: {
-  seg: Extract<TitleSegment, { kind: "diff" }>;
-  onOpenFile?: (filePath: string) => void;
-}) {
-  return (
-    <DiffBubble
-      fileName={seg.fileName}
-      additions={seg.additions ?? 0}
-      deletions={seg.deletions ?? 0}
-      onClickFileLink={() => {
-        const path = seg.filePath ?? seg.fileName;
-        onOpenFile?.(path);
-      }}
-    />
-  );
-}
-
-function BubbleLinkTitleSegment({
-  seg,
-  onOpenFile,
-}: {
-  seg: Extract<TitleSegment, { kind: "link" }>;
-  onOpenFile?: (filePath: string) => void;
-}) {
-  const fontWeight = seg.bold ? "medium" : undefined;
-  const isInteractive = Boolean(seg.href || seg.filePath);
-
-  return (
-    <Link
-      href={seg.href ?? "#"}
-      fontWeight={fontWeight}
-      color={seg.muted ? "fg.muted" : "fg.muted"}
-      textDecoration="none"
-      cursor={isInteractive ? "pointer" : "default"}
-      onClick={(event) => handleTitleLinkClick(event, seg, onOpenFile, true)}
-      _hover={{
-        textDecoration: "underline",
-        color: seg.muted ? "fg.muted" : "fg.blue-dark",
-      }}
-    >
-      {seg.text}
-    </Link>
-  );
-}
-
-function DefaultLinkTitleSegment({
-  seg,
-  onOpenFile,
-}: {
-  seg: Extract<TitleSegment, { kind: "link" }>;
-  onOpenFile?: (filePath: string) => void;
-}) {
-  const fontWeight = seg.bold ? "medium" : undefined;
-
-  return (
-    <Link
-      href={seg.href ?? "#"}
-      fontWeight={fontWeight}
-      color={seg.muted ? "fg.muted" : "accent.primary"}
-      textDecoration="underline"
-      onClick={(event) => handleTitleLinkClick(event, seg, onOpenFile)}
-      _hover={{
-        color: seg.muted ? "fg.muted" : "accent.primary",
-        textDecoration: "underline",
-      }}
-    >
-      {seg.text}
-    </Link>
-  );
-}
-
-function TextTitleSegment({
-  seg,
-  isClickable,
-}: {
-  seg: Extract<TitleSegment, { kind: "text" }>;
-  isClickable?: boolean;
-}) {
-  return (
-    <Span
-      fontWeight={seg.bold ? "medium" : undefined}
-      color="fg.muted"
-      _groupHover={{
-        color: isClickable && !seg.muted ? "fg" : "fg.muted",
-      }}
-    >
-      {seg.text}
-    </Span>
-  );
-}
-
-function TitleInline({
-  seg,
-  isClickable,
-  onOpenFile,
-}: {
-  seg: TitleSegment;
-  isClickable?: boolean;
-  onOpenFile?: (filePath: string) => void;
-}) {
-  switch (seg.kind) {
-    case "avatar":
-      return <AvatarTitleSegment seg={seg} />;
-    case "diff":
-      return <DiffTitleSegment seg={seg} onOpenFile={onOpenFile} />;
-    case "link":
-      return seg.variant === "bubble" ? (
-        <BubbleLinkTitleSegment seg={seg} onOpenFile={onOpenFile} />
-      ) : (
-        <DefaultLinkTitleSegment seg={seg} onOpenFile={onOpenFile} />
-      );
-    case "text":
-      return <TextTitleSegment seg={seg} isClickable={isClickable} />;
-    default:
-      return null;
-  }
-}
-
-function IndicatorView({ ind }: { ind?: Indicator }) {
-  if (!ind || ind.type === "none") return null;
-
-  if (ind.type === "icon") {
-    const IndicatorIcon = getIconComponent(ind.icon);
-    return (
-      <Timeline.Indicator outline="none" shadow="none" border="none" background="bg" color="fg">
-        <Span display="inline-flex" alignItems="center">
-          <IndicatorIcon size={14} strokeWidth={1} />
-        </Span>
-      </Timeline.Indicator>
-    );
-  }
-
-  return (
-    <Timeline.Indicator>
-      <Avatar.Root boxSize="full">
-        <Avatar.Image src={ind.src} alt={ind.alt} />
-        <Avatar.Fallback />
-      </Avatar.Root>
-    </Timeline.Indicator>
-  );
-}
-
-function CodeBlock({ code, language }: { code: string; language?: string }) {
-  return (
-    <Box
-      as="pre"
-      background="bg.muted"
-      color="fg"
-      borderRadius="md"
-      padding="sm"
-      fontFamily="mono"
-      fontSize="xs"
-      lineHeight="shorter"
-      overflowX="auto"
-      whiteSpace="pre"
-      aria-label={language ? `${language} code block` : "code block"}
-    >
-      <Box as="code">{code}</Box>
-    </Box>
-  );
-}
-
-function BlockView({ b, onOpenFile }: { b: Block; onOpenFile?: (filePath: string) => void }) {
-  switch (b.type) {
-    case "comment":
-      return (
-        <Card.Root>
-          <Card.Body>{b.text}</Card.Body>
-          {b.reactions?.clap ? (
-            <Card.Footer>
-              <Button>👏 {b.reactions.clap}</Button>
-            </Card.Footer>
-          ) : null}
-        </Card.Root>
-      );
-    case "code":
-      return (
-        <Card.Root border="0" padding="0">
-          <Card.Body padding="0">
-            <CodeBlock language={b.language} code={b.code} />
-          </Card.Body>
-        </Card.Root>
-      );
-    case "diff":
-      return (
-        <Card.Root border="0" padding="0">
-          <Card.Body padding="0">
-            <Box height="240px" minW="320px" overflow="hidden">
-              <DiffEditor
-                original={b.original}
-                modified={b.modified}
-                language={b.language}
-                sideBySide={b.sideBySide ?? false}
-                disableScroll={true}
-              />
-            </Box>
-          </Card.Body>
-        </Card.Root>
-      );
-    case "text":
-      return (
-        <Card.Root background="transparent">
-          <Card.Body padding="sm">
-            <Text textStyle="label/S/regular">{b.text}</Text>
-          </Card.Body>
-        </Card.Root>
-      );
-    case "references":
-      return (
-        <Stack mt="xs" gap="xs" flexDir="row" flexWrap="wrap">
-          {b.references.map((ref) => (
-            <ResourceBadge key={ref} fileName={ref} />
-          ))}
-        </Stack>
-      );
-    case "component":
-      return <>{b.render({ onOpenFile })}</>;
-  }
-}
-
-function TimelineItemRow({
-  item,
-  itemKey,
-  isOpen,
-  canExpand,
-  hasBlocks,
-  onToggle,
-  onOpenFile,
-}: {
-  item: Item;
-  itemKey: string;
-  isOpen: boolean;
-  canExpand: boolean;
-  hasBlocks: boolean;
-  onToggle: (key: string) => void;
-  onOpenFile?: (filePath: string) => void;
-}) {
-  return (
-    <Timeline.Item gap="xs" key={itemKey}>
-      <Timeline.Connector>
-        <Timeline.Separator />
-        <IndicatorView ind={item.indicator} />
-      </Timeline.Connector>
-      <Timeline.Content pb="xs">
-        {item.title.length > 0 && (
-          <Timeline.Title
-            className="group"
-            fontWeight="normal"
-            display="flex"
-            alignItems="center"
-            justifyContent="space-between"
-            cursor={canExpand ? "pointer" : "default"}
-            onClick={canExpand ? () => onToggle(itemKey) : undefined}
-          >
-            <Span display="inline-flex" alignItems="center" gap="sm" flexWrap="wrap">
-              <Span display="inline-flex" alignItems="center" gap="xs" flexWrap="wrap">
-                {item.title.map((seg, i) => (
-                  <TitleInline key={i} seg={seg} isClickable={canExpand} onOpenFile={onOpenFile} />
-                ))}
-              </Span>
-              {canExpand ? (
-                <Span
-                  display="inline-flex"
-                  alignItems="center"
-                  transition="transform 200ms ease, color 200ms ease"
-                  transform={isOpen ? "rotate(0deg)" : "rotate(-180deg)"}
-                  color="transparent"
-                  _groupHover={{ color: "fg" }}
-                >
-                  <ChevronUpIcon size={12} />
-                </Span>
-              ) : null}
-            </Span>
-          </Timeline.Title>
-        )}
-        {hasBlocks ? (
-          <Box display="grid" gridTemplateRows={isOpen ? "1fr" : "0fr"} transition="grid-template-rows 220ms ease">
-            {isOpen ? (
-              <Box
-                overflow="hidden"
-                opacity={1}
-                transform="translateY(0)"
-                transition="opacity 200ms ease, transform 200ms ease"
-              >
-                {item.blocks!.map((block, i) => (
-                  <Box key={i}>
-                    <BlockView b={block} onOpenFile={onOpenFile} />
-                  </Box>
-                ))}
-              </Box>
-            ) : null}
-          </Box>
-        ) : null}
-      </Timeline.Content>
-    </Timeline.Item>
-  );
-}
-
-export function TimelineFromJSON({ data, onOpenFile }: { data: TimelineDoc; onOpenFile?: (filePath: string) => void }) {
-  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
-
-  const getKey = (it: Item, idx: number) => (it.id ? `id:${it.id}` : `idx:${idx}`);
-
-  const toggle = (key: string) => {
-    setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));
-  };
-
-  return (
-    <Timeline.Root>
-      {data.items.map((item, idx) => {
-        const key = getKey(item, idx);
-        const hasBlocks = (item.blocks?.length ?? 0) > 0;
-        const canExpand = (item.expandable ?? true) && hasBlocks;
-        const isOpen = canExpand ? (expanded[key] ?? false) : hasBlocks;
-
-        return (
-          <TimelineItemRow
-            key={key}
-            item={item}
-            itemKey={key}
-            isOpen={isOpen}
-            canExpand={canExpand}
-            hasBlocks={hasBlocks}
-            onToggle={toggle}
-            onOpenFile={onOpenFile}
-          />
-        );
-      })}
-    </Timeline.Root>
-  );
-}

package/src/components/chat-ui/components/tool-invocation-timeline.stories.tsx

@@ -1,32 +0,0 @@
-import { Box } from "@chakra-ui/react";
-import type { Meta, StoryObj } from "@storybook/react";
-import type { SessionMessage, ToolPart } from "../agent-types";
-import rawConversationMessages from "../mocks/full-conversation-normalized.json";
-import { ToolInvocationTimeline } from "./tool-invocation-timeline";
-
-const conversationMessages = rawConversationMessages as unknown as SessionMessage[];
-
-const toolInvocations = conversationMessages
-  .flatMap((message) => message.parts ?? [])
-  .filter((part): part is ToolPart => part.type === "tool")
-  .slice(0, 10);
-
-const meta: Meta<typeof ToolInvocationTimeline> = {
-  title: "Chat UI/Tool Invocation Timeline",
-  component: ToolInvocationTimeline,
-  parameters: {
-    layout: "padded",
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ToolInvocationTimeline>;
-
-export const FromConversationData: Story = {
-  render: () => (
-    <Box maxW="960px" w="full" borderWidth="1px" borderRadius="md" bg="bg" p="md">
-      <ToolInvocationTimeline invocations={toolInvocations} />
-    </Box>
-  ),
-};

package/src/components/chat-ui/components/tool-invocation-timeline.tsx

@@ -1,16 +0,0 @@
-import { buildTimelineDocFromInvocations } from "../tool-rendering";
-import type { ToolPart } from "./message-types";
-import { TimelineFromJSON } from "./timeline";
-
-export interface ToolInvocationTimelineProps {
-  invocations: ToolPart[];
-  labeledBlocks?: boolean;
-  onOpenFile?: (filePath: string) => void;
-}
-
-export function ToolInvocationTimeline(props: ToolInvocationTimelineProps) {
-  const { invocations, labeledBlocks, onOpenFile } = props;
-  const data = buildTimelineDocFromInvocations(invocations, { labeledBlocks });
-
-  return <TimelineFromJSON data={data} onOpenFile={onOpenFile} />;
-}

package/src/components/chat-ui/index.ts

@@ -1,15 +0,0 @@
-export { ChatMessage } from "./components/ai-message";
-export type { MessageRootProps, MessageContentProps } from "./components/ai-message";
-
-export { ChatPrimitives } from "./components/ai-conversation";
-export type { ConversationRootProps, ConversationContentProps, ConversationScrollButtonProps } from "./components/ai-conversation";
-
-export { AutoScroll } from "./components/auto-scroll";
-export type { AutoScrollProps } from "./components/auto-scroll";
-
-export { ChatInput } from "./components/chat-input";
-
-export { SendButton } from "./components/send-button";
-export type { SendButtonProps } from "./components/send-button";
-
-export { createSerializedPromptState } from "./utils/editor-state";