Skip to content

feat(prompt-input): add PromptInput with token highlighting #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
pratikbuilds wants to merge 1 commit into from
Closed

feat(prompt-input): add PromptInput with token highlighting #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions e2e/fixtures.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@ import {
type ChatMessage,
type ConversationScrollPolicy,
useConversation,
PromptInput,
PromptInputSubmit,
PromptInputSuggestions,
PromptInputTextarea,
type PromptInputStatus,
type PromptToken,
} from "@corbits/react-ui";
import {
CommandPalette,
Expand Down Expand Up @@ -427,6 +433,69 @@ function ConversationGlideScenario() {
);
}

const PROMPT_TOKENS: PromptToken[] = [
{ id: "ada", kind: "mention", token: "@Ada", detail: "Research agent" },
{ id: "adam", kind: "mention", token: "@Adam", detail: "Review agent" },
{ id: "brief", kind: "command", token: "/brief", detail: "Summarize" },
];

/** Records every submit with its text, and every stop. "Reply" puts the
* prompt into the streaming state a host is in while an agent answers. */
function Prompt() {
const [value, setValue] = useState("");
const [status, setStatus] = useState<PromptInputStatus>("ready");
const { log, record } = useEventLog();
return (
<div style={{ width: 480, paddingTop: 160 }}>
<PromptInput
value={value}
onValueChange={setValue}
onSubmit={() => record(`submit:${value}`)}
tokens={PROMPT_TOKENS}
status={status}
>
<PromptInputSuggestions />
<PromptInputTextarea />
<PromptInputSubmit
onStop={() => {
record("stop");
setStatus("ready");
}}
/>
</PromptInput>
<Button onClick={() => setStatus("streaming")}>Reply</Button>
{log}
</div>
);
}

/** A host that sends attachments with the text: "Attach file" toggles one,
* and with it attached there is something to send even with no text. */
function PromptWithAttachment() {
const [value, setValue] = useState("");
const [attached, setAttached] = useState(false);
const { log, record } = useEventLog();
return (
<div style={{ width: 480 }}>
<PromptInput
value={value}
onValueChange={setValue}
onSubmit={() =>
record(`submit:${value}${attached ? "+attachment" : ""}`)
}
canSubmit={value.trim() !== "" || attached}
>
<PromptInputTextarea />
<PromptInputSubmit />
</PromptInput>
<Button aria-pressed={attached} onClick={() => setAttached(!attached)}>
Attach file
</Button>
{log}
</div>
);
}

export const scenarios: Record<string, () => ReactNode> = {
smoke: () => <Button>Ready</Button>,
"approval-card": () => <Approval state="idle" />,
Expand Down Expand Up @@ -459,4 +528,6 @@ export const scenarios: Record<string, () => ReactNode> = {
"conversation-settle": () => <ConversationScenario policy="settle" />,
"conversation-stick": () => <ConversationScenario policy="stick" />,
"conversation-glide": () => <ConversationGlideScenario />,
"prompt-input": () => <Prompt />,
"prompt-input-attachment": () => <PromptWithAttachment />,
};
Loading
Loading