research-agent-ui 0.1.77 → 0.1.78

package/README.md

@@ -2,7 +2,7 @@
 <br /> 
     <a href="https://www.npmjs.com/package/research-agent-ui"><img src="https://img.shields.io/npm/dm/research-agent-ui.svg" alt="NPM Monthly Downloads"></a>
     <a href="https://www.npmjs.com/package/research-agent-ui"><img src="https://img.shields.io/npm/v/research-agent-ui.svg" alt="npm version"></a>
-    <a href="https://bundlephobia.com/package/research-agent-ui"><img src="https://img.shields.io/bundlephobia/minzip/research-agent-ui" alt="Size"></a>
+    <a href="https://bundlephobia.com/package/research-agent-ui"><img src="https://img.shields.io/bundlephobia/minzip/research-agent-ui" alt="Size"></a>
     <a href="https://discord.gg/SJdBqBz3tV">
         <img src="https://img.shields.io/discord/1110227955554209923.svg?label=Chat&logo=Discord&colorB=7289da&style=flat"
             alt="Join Discord" />
@@ -68,6 +68,24 @@ function App() {
 }
 ```
 
+## Storybook
+
+Individual UI pieces can be browsed in isolation with [Storybook](https://storybook.js.org/).
+Stories render against **mock data only** (see `src/stories/mocks.ts`) — no API,
+auth session, or chat backend is required, so you can develop and review the
+chat components (message header with timestamp/copy/edit actions, search
+progress, follow-up suggestions, file & pasted-content cards) on their own.
+
+```bash
+# from packages/research-agent-ui
+bun run storybook        # dev server on http://localhost:6006
+bun run build-storybook  # static build → storybook-static/
+```
+
+A light/dark toggle in the toolbar switches between the two token palettes
+(mirrored from the host app's `globals.css` in `.storybook/preview.css`). Add
+new stories next to their component as `*.stories.tsx`.
+
 ## API Routes (`research-agent-ui/api`)
 
 All 25 Next.js route handlers are exported from the `research-agent-ui/api`

package/dist/components/ChatConversation/MessageBubble/FollowUpSuggestions.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import FollowUpSuggestions from './FollowUpSuggestions';
+/**
+ * `FollowUpSuggestions` renders the assistant's suggested next questions as
+ * clickable chips (keyboard shortcuts 1–5 also trigger them).
+ */
+declare const meta: Meta<typeof FollowUpSuggestions>;
+export default meta;
+type Story = StoryObj<typeof FollowUpSuggestions>;
+/** Three follow-up suggestions on the last message in the thread. */
+export declare const Default: Story;
+/** Many suggestions — only the first five are keyboard-shortcut enabled. */
+export declare const ManySuggestions: Story;

package/dist/components/ChatConversation/MessageBubble/UserMessageHeader.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import UserMessageHeader from './UserMessageHeader';
+/**
+ * `UserMessageHeader` renders the user's question as a collapsible heading with
+ * a timestamp (e.g. `12:29 PM`) and copy / edit-and-resubmit actions.
+ *
+ * The header is a controlled component, so the wrapper below wires up the
+ * `isExpanded`, `isEditing`, `editText`, and `copiedUserMsg` state that the
+ * parent `ChatMessageBubble` normally owns.
+ */
+declare const meta: Meta<typeof UserMessageHeader>;
+export default meta;
+type Story = StoryObj<typeof UserMessageHeader>;
+/** Default: expanded header with the 12:29 PM timestamp, copy and edit icons. */
+export declare const Default: Story;
+/** Long question that wraps and clamps across lines. */
+export declare const LongQuestion: Story;
+/** Copied state — the clipboard icon flips to a green check. */
+export declare const CopiedState: Story;

package/dist/components/FileUpload/FilePreviewCard.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FilePreviewCard } from './FilePreviewCard';
+/**
+ * `FilePreviewCard` is the thumbnail shown for each file attached to a message —
+ * an image preview or a file-type icon with name and size, plus upload status.
+ */
+declare const meta: Meta<typeof FilePreviewCard>;
+export default meta;
+type Story = StoryObj<typeof FilePreviewCard>;
+/** Non-image file: shows the file-type icon, name, and size. */
+export declare const Document: Story;
+/** Image file: shows the generated preview with a size badge. */
+export declare const Image: Story;
+/** Upload in progress. */
+export declare const Uploading: Story;

package/dist/components/MessageComposer/PastedContentCard.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PastedContentCard } from './PastedContentCard';
+/**
+ * `PastedContentCard` appears in the composer's attachment tray when a large
+ * block of text (>300 chars) is pasted into the chat input.
+ */
+declare const meta: Meta<typeof PastedContentCard>;
+export default meta;
+type Story = StoryObj<typeof PastedContentCard>;
+export declare const Default: Story;

package/dist/components/SearchResults/SearchProgressIndicator.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import SearchProgressIndicator from './SearchProgressIndicator';
+/**
+ * `SearchProgressIndicator` shows the live web/academic/news queries the agent
+ * runs while researching, with per-query running / done status.
+ */
+declare const meta: Meta<typeof SearchProgressIndicator>;
+export default meta;
+type Story = StoryObj<typeof SearchProgressIndicator>;
+/** Mid-search: some queries done, one still running. */
+export declare const Searching: Story;
+/** All queries completed. */
+export declare const Completed: Story;
+/** A single query in flight. */
+export declare const SingleQuery: Story;