refactor: migrate UI to Tailwind and unify chat with shadcn
This commit is contained in:
@@ -1,10 +0,0 @@
|
||||
.research-post.citation-highlight {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: -2px;
|
||||
background-color: color-mix(in srgb, var(--primary) 14%, transparent);
|
||||
}
|
||||
|
||||
.research-post:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
@@ -21,7 +21,10 @@ export function ResearchMarkdown({
|
||||
onNavigateCitation?: (url: string) => boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="research-markdown">
|
||||
<div
|
||||
data-testid="research-markdown"
|
||||
className="min-w-0 wrap-anywhere motion-reduce:[&_[data-sd-animate]]:animate-none motion-reduce:[&_[data-sd-animate-marker]::marker]:animate-none"
|
||||
>
|
||||
<Streamdown
|
||||
mode={isAnimating ? "streaming" : "static"}
|
||||
isAnimating={isAnimating}
|
||||
@@ -32,17 +35,47 @@ export function ResearchMarkdown({
|
||||
remarkPlugins={[remarkGfm]}
|
||||
skipHtml
|
||||
components={{
|
||||
p: ({ children }) => <p className="mt-1.5 mb-0 whitespace-normal">{children}</p>,
|
||||
ul: ({ children }) => <ul className="list-disc pl-6">{children}</ul>,
|
||||
ol: ({ children }) => <ol className="list-decimal pl-6">{children}</ol>,
|
||||
li: ({ children }) => <li className="not-first:mt-1">{children}</li>,
|
||||
blockquote: ({ children }) => (
|
||||
<blockquote className="my-3 border-l-2 pl-3 text-muted-foreground">
|
||||
{children}
|
||||
</blockquote>
|
||||
),
|
||||
th: ({ children }) => <th className="border p-1.5 text-left">{children}</th>,
|
||||
td: ({ children }) => <td className="border p-1.5 text-left">{children}</td>,
|
||||
strong: ({ children }) => <strong>{children}</strong>,
|
||||
pre: ({ children }) => <pre>{children}</pre>,
|
||||
code: ({ children, className }) => <code className={className}>{children}</code>,
|
||||
h1: ({ children }) => <h3>{children}</h3>,
|
||||
h2: ({ children }) => <h4>{children}</h4>,
|
||||
h3: ({ children }) => <h5>{children}</h5>,
|
||||
h4: ({ children }) => <h6>{children}</h6>,
|
||||
h5: ({ children }) => <h6>{children}</h6>,
|
||||
h6: ({ children }) => <h6>{children}</h6>,
|
||||
pre: ({ children }) => (
|
||||
<pre className="max-w-full overflow-x-auto bg-muted p-3 text-research-label whitespace-pre">
|
||||
{children}
|
||||
</pre>
|
||||
),
|
||||
code: ({ children, className }) => (
|
||||
<code className={`wrap-anywhere ${className ?? ""}`}>{children}</code>
|
||||
),
|
||||
h1: ({ children }) => (
|
||||
<h3 className="mt-3.5 mb-1.5 text-research-body font-semibold">{children}</h3>
|
||||
),
|
||||
h2: ({ children }) => (
|
||||
<h4 className="mt-3.5 mb-1.5 text-research-body font-semibold">{children}</h4>
|
||||
),
|
||||
h3: ({ children }) => (
|
||||
<h5 className="mt-3.5 mb-1.5 text-research-body font-semibold">{children}</h5>
|
||||
),
|
||||
h4: ({ children }) => (
|
||||
<h6 className="mt-3.5 mb-1.5 text-research-body font-semibold">{children}</h6>
|
||||
),
|
||||
h5: ({ children }) => (
|
||||
<h6 className="mt-3.5 mb-1.5 text-research-body font-semibold">{children}</h6>
|
||||
),
|
||||
h6: ({ children }) => (
|
||||
<h6 className="mt-3.5 mb-1.5 text-research-body font-semibold">{children}</h6>
|
||||
),
|
||||
a: ({ href, children, title }) => (
|
||||
<a
|
||||
className="text-primary underline underline-offset-2"
|
||||
href={href}
|
||||
title={title}
|
||||
target="_blank"
|
||||
@@ -65,7 +98,12 @@ export function ResearchMarkdown({
|
||||
),
|
||||
img: ({ src, alt }) =>
|
||||
typeof src === "string" && src ? (
|
||||
<a href={src} target="_blank" rel="noopener noreferrer">
|
||||
<a
|
||||
className="text-primary underline underline-offset-2"
|
||||
href={src}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{alt || "Open image"}
|
||||
</a>
|
||||
) : (
|
||||
@@ -73,12 +111,13 @@ export function ResearchMarkdown({
|
||||
),
|
||||
table: ({ children }) => (
|
||||
<section
|
||||
className="research-markdown-table"
|
||||
data-testid="research-markdown-table"
|
||||
className="my-3 max-w-full overflow-x-auto"
|
||||
aria-label="Response table"
|
||||
// oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Keyboard users need to scroll wide tables inside the narrow chat pane.
|
||||
tabIndex={0}
|
||||
>
|
||||
<table>{children}</table>
|
||||
<table className="w-full border-collapse text-research-label">{children}</table>
|
||||
</section>
|
||||
),
|
||||
}}
|
||||
|
||||
@@ -1,197 +0,0 @@
|
||||
.research-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
background: var(--background);
|
||||
overflow: hidden;
|
||||
}
|
||||
.research-heading {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.research-heading h2 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.research-context {
|
||||
margin: 0 0 0.75rem;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.75rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.research-history {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
.research-history span {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.research-history > [data-slot="native-select-wrapper"] {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.research-panel > p {
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.research-conversation {
|
||||
flex: 1;
|
||||
min-height: 80px;
|
||||
}
|
||||
.research-empty {
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.research-message {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.65;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.research-message p {
|
||||
margin: 0.35rem 0 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.research-tool-message {
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.75rem;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.research-start-form {
|
||||
flex-shrink: 0;
|
||||
padding: 0.75rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.research-start-form > fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.research-start-form label {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.research-account-picker {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.research-accounts {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.75rem;
|
||||
min-width: 0;
|
||||
max-height: 160px;
|
||||
overflow: auto;
|
||||
}
|
||||
.research-accounts label {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.research-run {
|
||||
flex-shrink: 0;
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.research-run p {
|
||||
margin: 0 0 0.5rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.research-report-path {
|
||||
overflow-wrap: anywhere;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.research-markdown {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.research-message .research-markdown p {
|
||||
white-space: normal;
|
||||
}
|
||||
.research-markdown h3,
|
||||
.research-markdown h4,
|
||||
.research-markdown h5,
|
||||
.research-markdown h6 {
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
margin: 1em 0 0.4em;
|
||||
}
|
||||
.research-markdown ul,
|
||||
.research-markdown ol {
|
||||
padding-left: 1.4rem;
|
||||
}
|
||||
.research-markdown ul {
|
||||
list-style: disc;
|
||||
}
|
||||
.research-markdown ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
.research-markdown li + li {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.research-markdown blockquote {
|
||||
margin: 0.75rem 0;
|
||||
padding-left: 0.75rem;
|
||||
border-left: 2px solid var(--border);
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
.research-markdown pre {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
padding: 0.75rem;
|
||||
background: var(--muted);
|
||||
white-space: pre;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.research-markdown code {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.research-markdown-table {
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
.research-markdown table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.research-markdown th,
|
||||
.research-markdown td {
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.4rem;
|
||||
text-align: left;
|
||||
}
|
||||
.research-markdown a {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.research-markdown [data-sd-animate],
|
||||
.research-markdown [data-sd-animate-marker]::marker {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -801,7 +801,7 @@ it("animates only the latest live assistant response and leaves prior replies st
|
||||
};
|
||||
const view = show();
|
||||
expect(await screen.findByText("Earlier answer")).toBeVisible();
|
||||
const replies = view.container.querySelectorAll(".research-markdown");
|
||||
const replies = view.container.querySelectorAll('[data-testid="research-markdown"]');
|
||||
expect(replies).toHaveLength(2);
|
||||
expect(replies[0]?.querySelector("[data-sd-animate]")).toBeNull();
|
||||
expect(replies[1]?.querySelector("[data-sd-animate]")).not.toBeNull();
|
||||
@@ -815,3 +815,18 @@ it("animates only the latest live assistant response and leaves prior replies st
|
||||
);
|
||||
await waitFor(() => expect(view.container.querySelector("[data-sd-animate]")).toBeNull());
|
||||
});
|
||||
|
||||
it("submits with Enter while preserving Shift+Enter and IME composition", async () => {
|
||||
show();
|
||||
const input = await screen.findByLabelText("Message");
|
||||
await waitFor(() => expect(input).toBeEnabled());
|
||||
fireEvent.change(input, { target: { value: "Compare browser automation tools" } });
|
||||
fireEvent.keyDown(input, { key: "Enter", shiftKey: true });
|
||||
fireEvent.keyDown(input, { key: "Enter", isComposing: true });
|
||||
expect(actions.start).not.toHaveBeenCalled();
|
||||
fireEvent.keyDown(input, { key: "Enter" });
|
||||
await waitFor(() => expect(actions.start).toHaveBeenCalledTimes(1));
|
||||
expect(actions.start).toHaveBeenCalledWith({
|
||||
data: expect.objectContaining({ topic: "Compare browser automation tools" }),
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useServerFn } from "@tanstack/react-start";
|
||||
import { ArrowUpIcon, SquareIcon } from "lucide-react";
|
||||
import { type ReactNode, useCallback, useEffect, useId, useRef, useState } from "react";
|
||||
import { Bubble, BubbleContent } from "#/components/ui/bubble";
|
||||
import { Button } from "#/components/ui/button";
|
||||
import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "#/components/ui/empty";
|
||||
import { Checkbox } from "#/components/ui/checkbox";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "#/components/ui/collapsible";
|
||||
import {
|
||||
@@ -12,7 +14,7 @@ import {
|
||||
InputGroupTextarea,
|
||||
} from "#/components/ui/input-group";
|
||||
import { Marker, MarkerContent } from "#/components/ui/marker";
|
||||
import { Message, MessageContent, MessageHeader } from "#/components/ui/message";
|
||||
import { Message, MessageContent } from "#/components/ui/message";
|
||||
import {
|
||||
MessageScroller,
|
||||
MessageScrollerButton,
|
||||
@@ -291,15 +293,26 @@ export function ResearchPanel({
|
||||
}
|
||||
|
||||
const renderPanel: RenderResearchPanel = (onCitationNavigated) => (
|
||||
<aside className="research-panel" aria-label="Research chat">
|
||||
<header className="research-heading">
|
||||
<h2>Research chat</h2>
|
||||
<aside
|
||||
data-testid="research-panel"
|
||||
className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-background"
|
||||
aria-label="Research chat"
|
||||
>
|
||||
<header
|
||||
data-testid="research-heading"
|
||||
className="flex shrink-0 flex-wrap items-center justify-between gap-2 border-b p-4"
|
||||
>
|
||||
<h2 className="m-0 text-base">Research chat</h2>
|
||||
<Button variant="ghost" size="sm" type="button" disabled={busy || !run} onClick={newChat}>
|
||||
New chat
|
||||
</Button>
|
||||
{(status.data?.history?.length ?? 0) > 0 && (
|
||||
<label className="research-history" htmlFor={historyId}>
|
||||
<span>Chat history</span>
|
||||
<label
|
||||
data-testid="research-history"
|
||||
className="flex w-full min-w-0 items-center gap-2 text-research-label text-muted-foreground [&>[data-slot=native-select-wrapper]]:min-w-0 [&>[data-slot=native-select-wrapper]]:flex-1"
|
||||
htmlFor={historyId}
|
||||
>
|
||||
<span className="shrink-0">Chat history</span>
|
||||
<NativeSelect
|
||||
id={historyId}
|
||||
size="sm"
|
||||
@@ -320,12 +333,20 @@ export function ResearchPanel({
|
||||
)}
|
||||
</header>
|
||||
{reconnecting && (
|
||||
<p className="deck-save-status" role="status">
|
||||
<p
|
||||
data-testid="deck-save-status"
|
||||
className="m-0 px-4 py-2 text-research-field leading-normal text-muted-foreground"
|
||||
role="status"
|
||||
>
|
||||
Reconnecting to research updates. Processing continues on your home server.
|
||||
</p>
|
||||
)}
|
||||
{status.isError && (
|
||||
<p className="deck-error" role="alert">
|
||||
<p
|
||||
data-testid="deck-error"
|
||||
className="m-0 px-4 py-2 text-research-field leading-body text-destructive wrap-anywhere"
|
||||
role="alert"
|
||||
>
|
||||
Unable to load research status.
|
||||
<Button type="button" onClick={() => void status.refetch()}>
|
||||
Retry
|
||||
@@ -333,19 +354,31 @@ export function ResearchPanel({
|
||||
</p>
|
||||
)}
|
||||
{selectedId && status.isSuccess && !run && (
|
||||
<p className="deck-error" role="alert">
|
||||
<p
|
||||
data-testid="deck-error"
|
||||
className="m-0 px-4 py-2 text-research-field leading-body text-destructive wrap-anywhere"
|
||||
role="alert"
|
||||
>
|
||||
This conversation could not be found.
|
||||
</p>
|
||||
)}
|
||||
{error && (
|
||||
<p className="deck-error" role="alert">
|
||||
<p
|
||||
data-testid="deck-error"
|
||||
className="m-0 px-4 py-2 text-research-field leading-body text-destructive wrap-anywhere"
|
||||
role="alert"
|
||||
>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
{status.isPending ? (
|
||||
<p role="status">Checking the research connection…</p>
|
||||
<p className="m-0 px-4 py-2 text-research-field" role="status">
|
||||
Checking the research connection…
|
||||
</p>
|
||||
) : !status.data?.configured ? (
|
||||
<p role="status">The connection to Codex on your home server is not configured.</p>
|
||||
<p className="m-0 px-4 py-2 text-research-field" role="status">
|
||||
The connection to Codex on your home server is not configured.
|
||||
</p>
|
||||
) : null}
|
||||
<ResearchConversation
|
||||
key={`conversation:${run?.id ?? "new"}`}
|
||||
@@ -358,14 +391,7 @@ export function ResearchPanel({
|
||||
return navigated;
|
||||
}}
|
||||
/>
|
||||
{run && (
|
||||
<ResearchRunStatus
|
||||
run={run}
|
||||
busy={busy}
|
||||
onCancel={() => void stop()}
|
||||
onOpenDeck={(deck) => void openDeck(deck)}
|
||||
/>
|
||||
)}
|
||||
{run && <ResearchRunStatus run={run} onOpenDeck={(deck) => void openDeck(deck)} />}
|
||||
<ResearchComposer
|
||||
key={run?.id ?? "new"}
|
||||
topic={draft.topic}
|
||||
@@ -378,6 +404,9 @@ export function ResearchPanel({
|
||||
!ready || busy || isResearchActive(status.data?.run ?? null) || !status.data?.configured
|
||||
}
|
||||
onSend={begin}
|
||||
active={isResearchActive(run)}
|
||||
busy={busy}
|
||||
onStop={() => void stop()}
|
||||
/>
|
||||
</aside>
|
||||
);
|
||||
@@ -398,15 +427,20 @@ function ResearchConversation({
|
||||
const names = { user: "You", assistant: "Codex", tool: "Tool activity" };
|
||||
return (
|
||||
<MessageScrollerProvider autoScroll>
|
||||
<MessageScroller className="research-conversation">
|
||||
<MessageScroller data-testid="research-conversation" className="min-h-[80px] flex-1">
|
||||
<MessageScrollerViewport aria-label="Research messages">
|
||||
<MessageScrollerContent aria-label="Research conversation" className="gap-5 p-4">
|
||||
{messages.length === 0 ? (
|
||||
<MessageScrollerItem messageId="empty">
|
||||
<p className="research-empty">
|
||||
Send a topic or question. The assistant adds columns as it searches and saves a
|
||||
report to your home server.
|
||||
</p>
|
||||
<Empty data-testid="research-empty">
|
||||
<EmptyHeader>
|
||||
<EmptyTitle>What would you like to explore?</EmptyTitle>
|
||||
<EmptyDescription>
|
||||
Send a topic or question. Codex adds columns as it searches and saves a report
|
||||
to your home server.
|
||||
</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
</Empty>
|
||||
</MessageScrollerItem>
|
||||
) : (
|
||||
messages.map((message, index) => (
|
||||
@@ -416,7 +450,10 @@ function ResearchConversation({
|
||||
scrollAnchor={message.role === "user"}
|
||||
>
|
||||
{message.role === "tool" ? (
|
||||
<Marker className="research-tool-message">
|
||||
<Marker
|
||||
data-testid="research-tool-message"
|
||||
className="text-research-label whitespace-pre-wrap text-muted-foreground wrap-anywhere"
|
||||
>
|
||||
<MarkerContent>
|
||||
<span className="sr-only">{names.tool}: </span>
|
||||
{message.text}
|
||||
@@ -425,10 +462,11 @@ function ResearchConversation({
|
||||
) : (
|
||||
<Message
|
||||
align={message.role === "user" ? "end" : "start"}
|
||||
className="research-message"
|
||||
data-testid="research-message"
|
||||
className="wrap-anywhere"
|
||||
>
|
||||
<MessageContent>
|
||||
<MessageHeader>{names[message.role]}</MessageHeader>
|
||||
<span className="sr-only">{names[message.role]}</span>
|
||||
{message.role === "assistant" ? (
|
||||
<ResearchMarkdown
|
||||
text={message.text}
|
||||
@@ -438,9 +476,9 @@ function ResearchConversation({
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Bubble align="end">
|
||||
<Bubble align="end" variant="muted">
|
||||
<BubbleContent>
|
||||
<p>{message.text}</p>
|
||||
<p className="m-0 whitespace-pre-wrap">{message.text}</p>
|
||||
</BubbleContent>
|
||||
</Bubble>
|
||||
)}
|
||||
@@ -467,6 +505,9 @@ function ResearchComposer({
|
||||
contextTitle,
|
||||
disabled,
|
||||
onSend,
|
||||
active,
|
||||
busy,
|
||||
onStop,
|
||||
}: {
|
||||
topic: string;
|
||||
selected: string[] | null;
|
||||
@@ -476,6 +517,9 @@ function ResearchComposer({
|
||||
contextTitle: string;
|
||||
disabled: boolean;
|
||||
onSend: (input: ResearchInput) => Promise<boolean>;
|
||||
active: boolean;
|
||||
busy: boolean;
|
||||
onStop: () => void;
|
||||
}) {
|
||||
const available = connections.filter((connection) => connection.status === "connected");
|
||||
const selectedIds = selected ?? available.slice(0, 6).map((connection) => connection.id);
|
||||
@@ -485,7 +529,8 @@ function ResearchComposer({
|
||||
);
|
||||
return (
|
||||
<form
|
||||
className="research-start-form"
|
||||
data-testid="research-start-form"
|
||||
className="shrink-0 p-3"
|
||||
aria-label="Research messages"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
@@ -498,108 +543,141 @@ function ResearchComposer({
|
||||
});
|
||||
}}
|
||||
>
|
||||
<p className="research-context">
|
||||
Deck to send: <strong>{contextTitle}</strong>
|
||||
</p>
|
||||
<fieldset disabled={disabled}>
|
||||
<Collapsible className="research-account-picker" disabled={disabled}>
|
||||
<CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>
|
||||
Connected accounts · {validSelection.length}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<fieldset className="research-accounts">
|
||||
<legend>Accounts for research (up to 6)</legend>
|
||||
{available.length === 0 ? (
|
||||
<p>Add a connected account first.</p>
|
||||
) : (
|
||||
available.map((connection) => (
|
||||
<label key={connection.id} htmlFor={`${id}-${connection.id}`}>
|
||||
<Checkbox
|
||||
id={`${id}-${connection.id}`}
|
||||
checked={selectedIds.includes(connection.id)}
|
||||
disabled={
|
||||
disabled ||
|
||||
(!selectedIds.includes(connection.id) && validSelection.length >= 6)
|
||||
}
|
||||
onCheckedChange={(checked) =>
|
||||
onSelectionChange(
|
||||
checked
|
||||
? [...selectedIds, connection.id]
|
||||
: selectedIds.filter((value) => value !== connection.id),
|
||||
)
|
||||
}
|
||||
/>
|
||||
{connection.displayName} ·{" "}
|
||||
{connection.platform === "twitter" ? "Twitter" : "Mastodon"}
|
||||
</label>
|
||||
))
|
||||
)}
|
||||
</fieldset>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<label htmlFor={id}>Message</label>
|
||||
<Collapsible data-testid="research-account-picker" disabled={disabled}>
|
||||
<label className="sr-only" htmlFor={id}>
|
||||
Message
|
||||
</label>
|
||||
<InputGroup>
|
||||
<InputGroupTextarea
|
||||
id={id}
|
||||
value={topic}
|
||||
onChange={(event) => onTopicChange(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
|
||||
event.preventDefault();
|
||||
event.currentTarget.form?.requestSubmit();
|
||||
}
|
||||
}}
|
||||
maxLength={1000}
|
||||
rows={3}
|
||||
placeholder="e.g. Compare reactions to WebMCP, then refine this deck."
|
||||
placeholder="Ask about this deck…"
|
||||
required
|
||||
disabled={disabled}
|
||||
/>
|
||||
<InputGroupAddon align="block-end" className="justify-end">
|
||||
<InputGroupButton
|
||||
type="submit"
|
||||
variant="default"
|
||||
size="sm"
|
||||
disabled={disabled || !topic.trim() || validSelection.length === 0}
|
||||
>
|
||||
Send
|
||||
</InputGroupButton>
|
||||
<InputGroupAddon align="block-end">
|
||||
<CollapsibleTrigger render={<InputGroupButton size="sm" />}>
|
||||
Connected accounts · {validSelection.length}
|
||||
</CollapsibleTrigger>
|
||||
{active ? (
|
||||
<InputGroupButton
|
||||
type="button"
|
||||
size="icon-sm"
|
||||
variant="outline"
|
||||
className="ml-auto"
|
||||
aria-label="Stop research"
|
||||
disabled={busy}
|
||||
onClick={onStop}
|
||||
>
|
||||
<SquareIcon />
|
||||
</InputGroupButton>
|
||||
) : (
|
||||
<InputGroupButton
|
||||
type="submit"
|
||||
variant="default"
|
||||
size="icon-sm"
|
||||
className="ml-auto"
|
||||
aria-label="Send"
|
||||
disabled={disabled || !topic.trim() || validSelection.length === 0}
|
||||
>
|
||||
<ArrowUpIcon />
|
||||
</InputGroupButton>
|
||||
)}
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</fieldset>
|
||||
<CollapsibleContent>
|
||||
<fieldset
|
||||
data-testid="research-accounts"
|
||||
className="grid max-h-[160px] min-w-0 gap-2 overflow-auto border p-3"
|
||||
>
|
||||
<legend>Accounts for research (up to 6)</legend>
|
||||
{available.length === 0 ? (
|
||||
<p>Add a connected account first.</p>
|
||||
) : (
|
||||
available.map((connection) => (
|
||||
<label
|
||||
className="flex items-center gap-2 text-research-field wrap-anywhere"
|
||||
key={connection.id}
|
||||
htmlFor={`${id}-${connection.id}`}
|
||||
>
|
||||
<Checkbox
|
||||
id={`${id}-${connection.id}`}
|
||||
checked={selectedIds.includes(connection.id)}
|
||||
disabled={
|
||||
disabled ||
|
||||
(!selectedIds.includes(connection.id) && validSelection.length >= 6)
|
||||
}
|
||||
onCheckedChange={(checked) =>
|
||||
onSelectionChange(
|
||||
checked
|
||||
? [...selectedIds, connection.id]
|
||||
: selectedIds.filter((value) => value !== connection.id),
|
||||
)
|
||||
}
|
||||
/>
|
||||
{connection.displayName} ·{" "}
|
||||
{connection.platform === "twitter" ? "Twitter" : "Mastodon"}
|
||||
</label>
|
||||
))
|
||||
)}
|
||||
</fieldset>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<p
|
||||
data-testid="research-context"
|
||||
className="mt-2 mb-0 text-research-label text-muted-foreground wrap-anywhere"
|
||||
>
|
||||
Deck to send: <strong>{contextTitle}</strong>
|
||||
</p>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function ResearchRunStatus({
|
||||
run,
|
||||
busy,
|
||||
onCancel,
|
||||
onOpenDeck,
|
||||
}: {
|
||||
run: ResearchRun;
|
||||
busy: boolean;
|
||||
onCancel: () => void;
|
||||
onOpenDeck: (deck: Deck) => void;
|
||||
}) {
|
||||
const deck = run.deck ?? run.contextDeck;
|
||||
return (
|
||||
<section className="research-run" aria-label="Research status">
|
||||
<section
|
||||
data-testid="research-run"
|
||||
className="max-h-[180px] shrink-0 overflow-y-auto border-t px-3 py-2 text-research-label"
|
||||
aria-label="Research status"
|
||||
>
|
||||
<Marker role="status">
|
||||
<MarkerContent>{statusNames[run.status]}</MarkerContent>
|
||||
</Marker>
|
||||
{run.error && (
|
||||
<p className="deck-error" role="alert">
|
||||
<p
|
||||
data-testid="deck-error"
|
||||
className="mt-0 mb-2 text-sm leading-body text-destructive wrap-anywhere"
|
||||
role="alert"
|
||||
>
|
||||
{run.error}
|
||||
</p>
|
||||
)}
|
||||
{run.reportPath && (
|
||||
<p>
|
||||
<p className="mt-0 mb-2 wrap-anywhere">
|
||||
Markdown location
|
||||
<br />
|
||||
<code className="research-report-path">{run.reportPath}</code>
|
||||
<code data-testid="research-report-path" className="text-research-label wrap-anywhere">
|
||||
{run.reportPath}
|
||||
</code>
|
||||
</p>
|
||||
)}
|
||||
<div className="deck-actions">
|
||||
{isResearchActive(run) && (
|
||||
<Button variant="outline" size="sm" type="button" disabled={busy} onClick={onCancel}>
|
||||
Stop research
|
||||
</Button>
|
||||
)}
|
||||
<div data-testid="deck-actions" className="flex flex-wrap items-center gap-2">
|
||||
{deck && (
|
||||
<Button
|
||||
variant="outline"
|
||||
|
||||
Reference in New Issue
Block a user