@pstdio/ui 0.0.1

package/src/components/chat-ui/components/chat-panel.stories.tsx

@@ -0,0 +1,396 @@
+import { Box, Button, HStack, Text } from "@chakra-ui/react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { type ComponentProps, useEffect, useRef, useState } from "react";
+import type { SessionMessage } from "../agent-types";
+import rawConversationMessages from "../mocks/full-conversation-normalized.json";
+import { ChatPanel } from "./chat-panel";
+
+const conversationMessages = rawConversationMessages as unknown as SessionMessage[];
+
+const meta: Meta<typeof ChatPanel> = {
+  title: "Chat UI/Chat Panel",
+  component: ChatPanel,
+  parameters: {
+    layout: "padded",
+    actions: { argTypesRegex: "^on[A-Z].*" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChatPanel>;
+type ChatPanelProps = ComponentProps<typeof ChatPanel>;
+
+const panelContainerStyles = {
+  w: "960px",
+  maxW: "100%",
+  h: "680px",
+  bg: "bg",
+  borderWidth: "1px",
+  borderColor: "border",
+  borderRadius: "lg",
+  p: "md",
+} as const;
+
+const defaultActions = (
+  <HStack gap="2">
+    <Button size="xs" variant="subtle">
+      Opencode
+    </Button>
+    <Button size="xs" variant="subtle">
+      GPT-5.3 Codex
+    </Button>
+  </HStack>
+);
+
+const defaultRepoMenu = (
+  <HStack gap="2">
+    <Text textStyle="label/S/medium" color="fg.muted">
+      mono
+    </Text>
+    <Button size="xs" variant="ghost">
+      main
+    </Button>
+  </HStack>
+);
+
+const streamingMessages = conversationMessages.slice(-18);
+const STREAM_CHUNK_SIZE = 10;
+const STREAM_INTERVAL_MS = 60;
+
+const splitTextIntoChunks = (text: string) => {
+  if (!text) return [];
+
+  const chunks: string[] = [];
+
+  for (let index = 0; index < text.length; index += STREAM_CHUNK_SIZE) {
+    chunks.push(text.slice(index, index + STREAM_CHUNK_SIZE));
+  }
+
+  return chunks;
+};
+
+const isTextPart = (part: SessionMessage["parts"][number]): part is { type: "text"; text: string } => {
+  return part.type === "text";
+};
+
+const updateAssistantTextPart = (
+  currentMessages: SessionMessage[],
+  messageId: string,
+  partIndex: number,
+  text: string,
+) => {
+  return currentMessages.map((message) => {
+    if (message.id !== messageId) return message;
+
+    const targetPart = message.parts[partIndex];
+    if (!targetPart || !isTextPart(targetPart)) return message;
+
+    const nextParts = [...message.parts];
+    nextParts[partIndex] = { ...targetPart, text };
+
+    return {
+      ...message,
+      parts: nextParts,
+    };
+  });
+};
+
+type TextPartEntry = { part: { type: "text"; text: string }; idx: number };
+
+const getTextPartEntries = (message: SessionMessage) => {
+  return message.parts
+    .map((part, idx) => ({ part, idx }))
+    .filter(({ part }) => isTextPart(part) && part.text.trim().length > 0) as TextPartEntry[];
+};
+
+const seedTextParts = (message: SessionMessage, textPartEntries: TextPartEntry[]) => {
+  const textPartIndexes = new Set(textPartEntries.map(({ idx }) => idx));
+  return {
+    ...message,
+    parts: message.parts.map((part, idx) =>
+      textPartIndexes.has(idx) && isTextPart(part) ? { ...part, text: "" } : part,
+    ),
+  } satisfies SessionMessage;
+};
+
+const streamTextParts = async (options: {
+  message: SessionMessage;
+  textPartEntries: TextPartEntry[];
+  isCancelled: () => boolean;
+  onChunk: (messageId: string, partIndex: number, text: string) => void;
+}) => {
+  const { message, textPartEntries, isCancelled, onChunk } = options;
+
+  for (const { part, idx } of textPartEntries) {
+    if (isCancelled()) return;
+
+    const chunks = splitTextIntoChunks(part.text);
+    let streamed = "";
+
+    for (const chunk of chunks) {
+      if (isCancelled()) return;
+      streamed += chunk;
+      onChunk(message.id, idx, streamed);
+      await delay(STREAM_INTERVAL_MS);
+    }
+  }
+};
+
+const streamConversationMessages = async (options: {
+  messages: SessionMessage[];
+  isCancelled: () => boolean;
+  onStart: () => void;
+  onMessage: (message: SessionMessage) => void;
+  onChunk: (messageId: string, partIndex: number, text: string) => void;
+  onComplete: () => void;
+}) => {
+  const { messages, isCancelled, onStart, onMessage, onChunk, onComplete } = options;
+
+  onStart();
+
+  for (const message of messages) {
+    if (isCancelled()) return;
+
+    const textPartEntries = getTextPartEntries(message);
+    if (textPartEntries.length === 0) {
+      onMessage(message);
+
+      const pauseMs =
+        message.role === "user" ? CONVERSATION_STREAM_MESSAGE_DELAY_MS : CONVERSATION_STREAM_STEP_DELAY_MS;
+      await delay(pauseMs);
+      continue;
+    }
+
+    onMessage(seedTextParts(message, textPartEntries));
+    await streamTextParts({ message, textPartEntries, isCancelled, onChunk });
+    await delay(CONVERSATION_STREAM_MESSAGE_DELAY_MS);
+  }
+
+  if (!isCancelled()) onComplete();
+};
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const CONVERSATION_STREAM_MESSAGE_DELAY_MS = 200;
+const CONVERSATION_STREAM_STEP_DELAY_MS = 80;
+
+const clearStreamTimer = (timerRef: { current: ReturnType<typeof setInterval> | null }) => {
+  if (timerRef.current === null) return;
+
+  clearInterval(timerRef.current);
+  timerRef.current = null;
+};
+
+const streamAssistantText = (options: {
+  timerRef: { current: ReturnType<typeof setInterval> | null };
+  sourceText: string;
+  onStart: () => void;
+  onChunk: (nextText: string) => void;
+  onComplete: () => void;
+}) => {
+  const { timerRef, sourceText, onStart, onChunk, onComplete } = options;
+
+  clearStreamTimer(timerRef);
+
+  const chunks = splitTextIntoChunks(sourceText);
+  if (chunks.length === 0) {
+    onComplete();
+    return;
+  }
+
+  let streamedText = "";
+  let chunkIndex = 0;
+
+  onStart();
+
+  timerRef.current = setInterval(() => {
+    streamedText += chunks[chunkIndex] ?? "";
+    onChunk(streamedText);
+
+    chunkIndex += 1;
+
+    if (chunkIndex >= chunks.length) {
+      clearStreamTimer(timerRef);
+      onComplete();
+    }
+  }, STREAM_INTERVAL_MS);
+};
+
+const buildMockAssistantReply = (text: string, attachments: string[]) => {
+  if (attachments.length === 0) {
+    return `Mock response: I received "${text}" and generated a draft answer.`;
+  }
+
+  return `Mock response: I received "${text}" with ${attachments.length} attachment(s): ${attachments.join(", ")}.`;
+};
+
+function MockChatPanelRenderer(props: ChatPanelProps) {
+  const {
+    messages: initialMessages = [],
+    onSubmitMessage,
+    emptyStateTitle,
+    emptyStateDescription,
+    chatInputPlaceholder,
+    actions,
+    repoMenu,
+  } = props;
+
+  const [messages, setMessages] = useState<SessionMessage[]>(initialMessages);
+  const [streaming, setStreaming] = useState(false);
+  const [nextMessageNumber, setNextMessageNumber] = useState(initialMessages.length + 1);
+  const streamTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    clearStreamTimer(streamTimerRef);
+    setMessages(initialMessages);
+    setNextMessageNumber(initialMessages.length + 1);
+  }, [initialMessages]);
+
+  useEffect(() => {
+    return () => clearStreamTimer(streamTimerRef);
+  }, []);
+
+  const handleSubmitMessage = (text: string, attachments: string[]) => {
+    onSubmitMessage?.(text, attachments);
+
+    const userMessage: SessionMessage = {
+      id: `message-${nextMessageNumber}`,
+      role: "user",
+      parts: [{ type: "text", text }],
+    };
+
+    const assistantReply = buildMockAssistantReply(text, attachments);
+    const assistantMessageId = `message-${nextMessageNumber + 1}`;
+    const assistantMessage: SessionMessage = {
+      id: assistantMessageId,
+      role: "assistant",
+      parts: [{ type: "text", text: "" }],
+    };
+
+    setNextMessageNumber((current) => current + 2);
+    setMessages((current) => [...current, userMessage, assistantMessage]);
+    streamAssistantText({
+      timerRef: streamTimerRef,
+      sourceText: assistantReply,
+      onStart: () => setStreaming(true),
+      onChunk: (nextText) => {
+        setMessages((current) => updateAssistantTextPart(current, assistantMessageId, 0, nextText));
+      },
+      onComplete: () => setStreaming(false),
+    });
+  };
+
+  return (
+    <ChatPanel
+      messages={messages}
+      streaming={streaming}
+      emptyStateTitle={emptyStateTitle}
+      emptyStateDescription={emptyStateDescription}
+      chatInputPlaceholder={chatInputPlaceholder}
+      onSubmitMessage={handleSubmitMessage}
+      actions={actions}
+      repoMenu={repoMenu}
+    />
+  );
+}
+
+export const Empty: Story = {
+  render: (args) => (
+    <Box {...panelContainerStyles}>
+      <MockChatPanelRenderer {...args} />
+    </Box>
+  ),
+  args: {
+    messages: [],
+    streaming: false,
+    emptyStateTitle: "No active conversations",
+    emptyStateDescription: "Start a conversation to see messages here.",
+    chatInputPlaceholder: "Type a message...",
+    actions: defaultActions,
+    repoMenu: defaultRepoMenu,
+    onSubmitMessage: (text: string, attachments: string[]) => {
+      console.log("Submitted", { text, attachments });
+    },
+  },
+};
+
+export const Conversation: Story = {
+  render: (args) => (
+    <Box {...panelContainerStyles}>
+      <MockChatPanelRenderer {...args} />
+    </Box>
+  ),
+  args: {
+    ...Empty.args,
+    messages: conversationMessages,
+  },
+};
+
+function StreamingConversationRenderer(props: ChatPanelProps) {
+  const {
+    messages: allMessages = [],
+    emptyStateTitle,
+    emptyStateDescription,
+    chatInputPlaceholder,
+    actions,
+    repoMenu,
+  } = props;
+
+  const [visibleMessages, setVisibleMessages] = useState<SessionMessage[]>([]);
+  const [streaming, setStreaming] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const run = async () => {
+      await streamConversationMessages({
+        messages: allMessages,
+        isCancelled: () => cancelled,
+        onStart: () => {
+          setVisibleMessages([]);
+          setStreaming(true);
+        },
+        onMessage: (message) => {
+          setVisibleMessages((prev) => [...prev, message]);
+        },
+        onChunk: (messageId, partIndex, text) => {
+          setVisibleMessages((prev) => updateAssistantTextPart(prev, messageId, partIndex, text));
+        },
+        onComplete: () => {
+          setStreaming(false);
+        },
+      });
+    };
+
+    run();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [allMessages]);
+
+  return (
+    <ChatPanel
+      messages={visibleMessages}
+      streaming={streaming}
+      emptyStateTitle={emptyStateTitle}
+      emptyStateDescription={emptyStateDescription}
+      chatInputPlaceholder={chatInputPlaceholder}
+      actions={actions}
+      repoMenu={repoMenu}
+    />
+  );
+}
+
+export const Streaming: Story = {
+  render: (args) => (
+    <Box {...panelContainerStyles}>
+      <StreamingConversationRenderer {...args} />
+    </Box>
+  ),
+  args: {
+    ...Empty.args,
+    messages: streamingMessages,
+  },
+};

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

@@ -0,0 +1,97 @@
+import { Box, Flex, Stack } from "@chakra-ui/react";
+import { MessageCircleIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { EmptyState } from "@/components/empty-state";
+import { createSerializedPromptState } from "../utils/editor-state";
+import { ChatPrimitives } from "./ai-conversation";
+import { ChatMessage } from "./ai-message";
+import { AutoScroll } from "./auto-scroll";
+import { ChatInput } from "./chat-input";
+import { MessagePartsRenderer } from "./message-parts-renderer";
+import { getMessageOrigin, mergeReasoningToolOnlyMessages, type SessionMessage } from "./message-types";
+
+const EMPTY_PROMPT_STATE = createSerializedPromptState();
+
+interface ChatPanelProps {
+  messages: SessionMessage[];
+  streaming?: boolean;
+  emptyStateTitle: string;
+  emptyStateDescription: string;
+  chatInputPlaceholder: string;
+  onSubmitMessage?: (text: string, attachments: string[]) => void;
+  actions?: ReactNode;
+  repoMenu?: ReactNode;
+  attachedResources?: string[];
+  onClearAttachments?: () => void;
+  attachmentList?: ReactNode;
+  approvalPrompt?: ReactNode;
+}
+
+export const ChatPanel = (props: ChatPanelProps) => {
+  const {
+    messages,
+    streaming = false,
+    emptyStateTitle,
+    emptyStateDescription,
+    chatInputPlaceholder,
+    onSubmitMessage,
+    actions,
+    repoMenu,
+    attachedResources,
+    onClearAttachments,
+    attachmentList,
+    approvalPrompt,
+  } = props;
+
+  const merged = mergeReasoningToolOnlyMessages(messages);
+  const hasMessages = merged.length > 0;
+  const userMessageCount = merged.reduce((count, message) => count + (message.role === "user" ? 1 : 0), 0);
+
+  return (
+    <Flex position="relative" direction="column" w="full" h="full" overflow="hidden">
+      <ChatPrimitives.Root>
+        <AutoScroll userMessageCount={userMessageCount} />
+        <ChatPrimitives.Viewport>
+          {hasMessages ? (
+            <Stack gap="sm">
+              {merged.map((message) => {
+                const from = getMessageOrigin(message.role);
+
+                return (
+                  <ChatMessage.Root key={message.id} from={from}>
+                    <ChatMessage.Content from={from}>
+                      <MessagePartsRenderer message={message} streaming={streaming} />
+                    </ChatMessage.Content>
+                  </ChatMessage.Root>
+                );
+              })}
+            </Stack>
+          ) : (
+            <EmptyState
+              icon={<MessageCircleIcon size={48} strokeWidth={1.5} />}
+              title={emptyStateTitle}
+              description={emptyStateDescription}
+            />
+          )}
+        </ChatPrimitives.Viewport>
+        <ChatPrimitives.ScrollToBottom aria-label="Scroll to latest message" />
+      </ChatPrimitives.Root>
+      {approvalPrompt}
+      <Box px="sm">
+        <ChatInput
+          placeholder={chatInputPlaceholder}
+          defaultState={EMPTY_PROMPT_STATE}
+          streaming={streaming}
+          onSubmit={onSubmitMessage}
+          actions={actions}
+          attachedResources={attachedResources}
+          onClearAttachments={onClearAttachments}
+          attachmentList={attachmentList}
+        />
+      </Box>
+      <Flex p="2xs" justifyContent="flex-end">
+        {repoMenu}
+      </Flex>
+    </Flex>
+  );
+};

package/src/components/chat-ui/components/message-parts-renderer.stories.tsx

@@ -0,0 +1,59 @@
+import { Box, Stack } from "@chakra-ui/react";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { SessionMessage } from "../agent-types";
+import rawConversationMessages from "../mocks/full-conversation-normalized.json";
+import { ChatMessage } from "./ai-message";
+import { MessagePartsRenderer } from "./message-parts-renderer";
+import { getMessageOrigin } from "./message-types";
+
+const conversationMessages = rawConversationMessages as unknown as SessionMessage[];
+
+const hasTextPart = (message: SessionMessage) =>
+  (message.parts ?? []).some((part) => part.type === "text" && "text" in part);
+
+const hasReasoningOrToolPart = (message: SessionMessage) =>
+  (message.parts ?? []).some((part) => part.type === "reasoning" || part.type === "tool");
+
+const assistantMessageWithRichParts =
+  conversationMessages.find((message) => message.role === "assistant" && hasReasoningOrToolPart(message)) ??
+  conversationMessages[0];
+
+const userMessageWithText =
+  conversationMessages.find((message) => message.role === "user" && hasTextPart(message)) ?? conversationMessages[0];
+
+const meta: Meta<typeof MessagePartsRenderer> = {
+  title: "Chat UI/Message Parts Renderer",
+  component: MessagePartsRenderer,
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MessagePartsRenderer>;
+
+const MessagePreview = (props: { message: SessionMessage }) => {
+  const { message } = props;
+  const from = getMessageOrigin(message.role);
+
+  return (
+    <Box maxW="960px" w="full" borderWidth="1px" borderRadius="md" bg="bg" p="md">
+      <Stack gap="sm">
+        <ChatMessage.Root from={from}>
+          <ChatMessage.Content from={from}>
+            <MessagePartsRenderer message={message} />
+          </ChatMessage.Content>
+        </ChatMessage.Root>
+      </Stack>
+    </Box>
+  );
+};
+
+export const AssistantReasoningAndToolParts: Story = {
+  render: () => <MessagePreview message={assistantMessageWithRichParts} />,
+};
+
+export const UserTextParts: Story = {
+  render: () => <MessagePreview message={userMessageWithText} />,
+};

package/src/components/chat-ui/components/message-parts-renderer.tsx

@@ -0,0 +1,133 @@
+import { Box, Spinner, Text } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+import { RichMessage } from "@/components/rich-text";
+import type { ErrorPart, SessionMessage, SessionMessagePart, ToolPart } from "../agent-types";
+import { Response } from "./ai-response";
+import { ToolInvocationTimeline, type ToolInvocationTimelineProps } from "./tool-invocation-timeline";
+
+type ToolInvocationTimelineComponent = (props: ToolInvocationTimelineProps) => ReactNode;
+
+export interface MessagePartsProps {
+  message: SessionMessage;
+  streaming?: boolean;
+  onOpenFile?: (filePath: string) => void;
+  toolInvocationTimeline?: ToolInvocationTimelineComponent;
+}
+
+const isToolPart = (part: SessionMessagePart): part is ToolPart => {
+  return part.type === "tool";
+};
+
+const formatTokenCount = (count: number) => {
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}k`;
+  return String(count);
+};
+
+const getErrorMessage = (errorType: ErrorPart["errorType"]) => {
+  switch (errorType) {
+    case "timeout":
+      return "Session timed out.";
+    case "crash":
+      return "Session crashed unexpectedly.";
+    case "permission":
+      return "Permission denied.";
+    default:
+      return "An error occurred.";
+  }
+};
+
+const collectToolInvocations = (parts: SessionMessagePart[], startIndex: number) => {
+  const invocations: ToolPart[] = [];
+  let lookahead = startIndex;
+
+  while (lookahead < parts.length) {
+    const nextPart = parts[lookahead];
+    if (!isToolPart(nextPart)) break;
+    invocations.push(nextPart);
+    lookahead += 1;
+  }
+
+  return { invocations, nextIndex: lookahead - 1 };
+};
+
+export function MessagePartsRenderer(props: MessagePartsProps) {
+  const { message, onOpenFile, toolInvocationTimeline } = props;
+  const RenderToolInvocationTimeline = toolInvocationTimeline ?? ToolInvocationTimeline;
+  const parts = message.parts ?? [];
+  const nodes: ReactNode[] = [];
+
+  for (let partIndex = 0; partIndex < parts.length; partIndex += 1) {
+    const part = parts[partIndex];
+    const key = `${message.id}-${partIndex}`;
+
+    switch (part.type) {
+      case "text":
+        nodes.push(
+          <div key={key}>
+            <Response>{part.text}</Response>
+          </div>,
+        );
+        break;
+      case "reasoning":
+        nodes.push(
+          <Box
+            key={key}
+            padding="0"
+            css={{
+              "& .rich-text, & .rich-text *": {
+                color: "fg.subtle !important",
+                fontSize: ".75rem !important",
+                fontWeight: "normal !important",
+              },
+            }}
+          >
+            <RichMessage defaultState={part.text} />
+          </Box>,
+        );
+        break;
+      case "tool": {
+        const { invocations, nextIndex } = collectToolInvocations(parts, partIndex);
+        partIndex = nextIndex;
+        nodes.push(
+          <Box key={key} width="full">
+            <RenderToolInvocationTimeline invocations={invocations} labeledBlocks onOpenFile={onOpenFile} />
+          </Box>,
+        );
+        break;
+      }
+      case "loading":
+        nodes.push(
+          <Box key={key} display="flex" alignItems="center" gap="2" py="2">
+            <Spinner size="sm" />
+            <Text fontSize="sm" color="fg.muted">
+              Thinking...
+            </Text>
+          </Box>,
+        );
+        break;
+      case "error":
+        nodes.push(
+          <Box key={key} py="2">
+            <Text fontSize="sm" color="fg.error">
+              {getErrorMessage(part.errorType)}
+            </Text>
+          </Box>,
+        );
+        break;
+      case "token_usage":
+        nodes.push(
+          <Box key={key} py="1">
+            <Text fontSize="xs" color="fg.subtle">
+              Tokens: {formatTokenCount(part.inputTokens)} in / {formatTokenCount(part.outputTokens)} out
+              {part.cacheReadTokens ? ` / ${formatTokenCount(part.cacheReadTokens)} cache read` : ""}
+            </Text>
+          </Box>,
+        );
+        break;
+      default:
+        nodes.push(null);
+    }
+  }
+
+  return <>{nodes}</>;
+}