@pstdio/ui 0.0.2 → 0.0.4

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

@@ -1,396 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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}</>;
-}