Skip to content

Commit eca525a

Browse files
haydenbleaselhaydenbleasel
committed
Update prompt-input.tsx
1 parent d5f1159 commit eca525a

File tree

1 file changed

+121
-108
lines changed

1 file changed

+121
-108
lines changed

‎packages/examples/src/prompt-input.tsx‎

Lines changed: 121 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
"use client";
22

3+
import {
4+
ModelSelector,
5+
ModelSelectorContent,
6+
ModelSelectorEmpty,
7+
ModelSelectorGroup,
8+
ModelSelectorInput,
9+
ModelSelectorItem,
10+
ModelSelectorList,
11+
ModelSelectorLogo,
12+
ModelSelectorLogoGroup,
13+
ModelSelectorName,
14+
ModelSelectorTrigger,
15+
} from "@repo/elements/model-selector";
316
import {
417
PromptInput,
518
PromptInputActionAddAttachments,
@@ -20,20 +33,8 @@ import {
2033
PromptInputTools,
2134
usePromptInputController,
2235
} from "@repo/elements/prompt-input";
23-
import {
24-
ModelSelector,
25-
ModelSelectorContent,
26-
ModelSelectorEmpty,
27-
ModelSelectorGroup,
28-
ModelSelectorInput,
29-
ModelSelectorItem,
30-
ModelSelectorList,
31-
ModelSelectorLogo,
32-
ModelSelectorLogoGroup,
33-
ModelSelectorName,
34-
ModelSelectorTrigger,
35-
} from "@repo/elements/model-selector";
3636
import { Button } from "@repo/shadcn-ui/components/ui/button";
37+
import { ButtonGroup } from "@repo/shadcn-ui/components/ui/button-group";
3738
import { CheckIcon, GlobeIcon } from "lucide-react";
3839
import { useRef, useState } from "react";
3940

@@ -78,46 +79,53 @@ const models = [
7879
const SUBMITTING_TIMEOUT = 200;
7980
const STREAMING_TIMEOUT = 2000;
8081

81-
function HeaderControls() {
82+
const HeaderControls = () => {
8283
const controller = usePromptInputController();
84+
8385
return (
84-
<header className="mb-10">
85-
<h4 className="mb-4 text-sm">
86+
<header className="mt-8 flex items-center justify-between">
87+
<p className="text-sm">
8688
Header Controls via{" "}
87-
<code className="rounded-md bg-gray-100 p-1 font-bold">
89+
<code className="rounded-md bg-muted p-1 font-bold">
8890
PromptInputProvider
8991
</code>
90-
</h4>
91-
<div className="mb-10 flex gap-2 rounded-md bg-gray-100 p-2">
92+
</p>
93+
<ButtonGroup>
9294
<Button
9395
onClick={() => {
9496
controller.textInput.clear();
9597
}}
98+
size="sm"
9699
type="button"
100+
variant="outline"
97101
>
98-
clear input
102+
Clear input
99103
</Button>
100104
<Button
101105
onClick={() => {
102106
controller.textInput.setInput("Inserted via PromptInputProvider");
103107
}}
108+
size="sm"
104109
type="button"
110+
variant="outline"
105111
>
106-
set input
112+
Set input
107113
</Button>
108114

109115
<Button
110116
onClick={() => {
111117
controller.attachments.clear();
112118
}}
119+
size="sm"
113120
type="button"
121+
variant="outline"
114122
>
115-
clear attachments
123+
Clear attachments
116124
</Button>
117-
</div>
125+
</ButtonGroup>
118126
</header>
119127
);
120-
}
128+
};
121129

122130
const Example = () => {
123131
const [model, setModel] = useState<string>(models[0].id);
@@ -152,90 +160,95 @@ const Example = () => {
152160
};
153161

154162
return (
155-
<PromptInputProvider>
156-
<HeaderControls />
157-
<PromptInput globalDrop multiple onSubmit={handleSubmit}>
158-
<PromptInputHeader>
159-
<PromptInputAttachments>
160-
{(attachment) => <PromptInputAttachment data={attachment} />}
161-
</PromptInputAttachments>
162-
</PromptInputHeader>
163-
<PromptInputBody>
164-
<PromptInputTextarea ref={textareaRef} />
165-
</PromptInputBody>
166-
<PromptInputFooter>
167-
<PromptInputTools>
168-
<PromptInputActionMenu>
169-
<PromptInputActionMenuTrigger />
170-
<PromptInputActionMenuContent>
171-
<PromptInputActionAddAttachments />
172-
</PromptInputActionMenuContent>
173-
</PromptInputActionMenu>
174-
<PromptInputSpeechButton textareaRef={textareaRef} />
175-
<PromptInputButton>
176-
<GlobeIcon size={16} />
177-
<span>Search</span>
178-
</PromptInputButton>
179-
<ModelSelector
180-
onOpenChange={setModelSelectorOpen}
181-
open={modelSelectorOpen}
182-
>
183-
<ModelSelectorTrigger asChild>
184-
<PromptInputButton>
185-
{selectedModelData?.chefSlug && (
186-
<ModelSelectorLogo provider={selectedModelData.chefSlug} />
187-
)}
188-
{selectedModelData?.name && (
189-
<ModelSelectorName>
190-
{selectedModelData.name}
191-
</ModelSelectorName>
192-
)}
193-
</PromptInputButton>
194-
</ModelSelectorTrigger>
195-
<ModelSelectorContent>
196-
<ModelSelectorInput placeholder="Search models..." />
197-
<ModelSelectorList>
198-
<ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
199-
{["OpenAI", "Anthropic", "Google"].map((chef) => (
200-
<ModelSelectorGroup key={chef} heading={chef}>
201-
{models
202-
.filter((m) => m.chef === chef)
203-
.map((m) => (
204-
<ModelSelectorItem
205-
key={m.id}
206-
onSelect={() => {
207-
setModel(m.id);
208-
setModelSelectorOpen(false);
209-
}}
210-
value={m.id}
211-
>
212-
<ModelSelectorLogo provider={m.chefSlug} />
213-
<ModelSelectorName>{m.name}</ModelSelectorName>
214-
<ModelSelectorLogoGroup>
215-
{m.providers.map((provider) => (
216-
<ModelSelectorLogo
217-
key={provider}
218-
provider={provider}
219-
/>
220-
))}
221-
</ModelSelectorLogoGroup>
222-
{model === m.id ? (
223-
<CheckIcon className="ml-auto size-4" />
224-
) : (
225-
<div className="ml-auto size-4" />
226-
)}
227-
</ModelSelectorItem>
228-
))}
229-
</ModelSelectorGroup>
230-
))}
231-
</ModelSelectorList>
232-
</ModelSelectorContent>
233-
</ModelSelector>
234-
</PromptInputTools>
235-
<PromptInputSubmit status={status} />
236-
</PromptInputFooter>
237-
</PromptInput>
238-
</PromptInputProvider>
163+
<div className="size-full">
164+
<PromptInputProvider>
165+
<PromptInput globalDrop multiple onSubmit={handleSubmit}>
166+
<PromptInputHeader>
167+
<PromptInputAttachments>
168+
{(attachment) => <PromptInputAttachment data={attachment} />}
169+
</PromptInputAttachments>
170+
</PromptInputHeader>
171+
<PromptInputBody>
172+
<PromptInputTextarea ref={textareaRef} />
173+
</PromptInputBody>
174+
<PromptInputFooter>
175+
<PromptInputTools>
176+
<PromptInputActionMenu>
177+
<PromptInputActionMenuTrigger />
178+
<PromptInputActionMenuContent>
179+
<PromptInputActionAddAttachments />
180+
</PromptInputActionMenuContent>
181+
</PromptInputActionMenu>
182+
<PromptInputSpeechButton textareaRef={textareaRef} />
183+
<PromptInputButton>
184+
<GlobeIcon size={16} />
185+
<span>Search</span>
186+
</PromptInputButton>
187+
<ModelSelector
188+
onOpenChange={setModelSelectorOpen}
189+
open={modelSelectorOpen}
190+
>
191+
<ModelSelectorTrigger asChild>
192+
<PromptInputButton>
193+
{selectedModelData?.chefSlug && (
194+
<ModelSelectorLogo
195+
provider={selectedModelData.chefSlug}
196+
/>
197+
)}
198+
{selectedModelData?.name && (
199+
<ModelSelectorName>
200+
{selectedModelData.name}
201+
</ModelSelectorName>
202+
)}
203+
</PromptInputButton>
204+
</ModelSelectorTrigger>
205+
<ModelSelectorContent>
206+
<ModelSelectorInput placeholder="Search models..." />
207+
<ModelSelectorList>
208+
<ModelSelectorEmpty>No models found.</ModelSelectorEmpty>
209+
{["OpenAI", "Anthropic", "Google"].map((chef) => (
210+
<ModelSelectorGroup heading={chef} key={chef}>
211+
{models
212+
.filter((m) => m.chef === chef)
213+
.map((m) => (
214+
<ModelSelectorItem
215+
key={m.id}
216+
onSelect={() => {
217+
setModel(m.id);
218+
setModelSelectorOpen(false);
219+
}}
220+
value={m.id}
221+
>
222+
<ModelSelectorLogo provider={m.chefSlug} />
223+
<ModelSelectorName>{m.name}</ModelSelectorName>
224+
<ModelSelectorLogoGroup>
225+
{m.providers.map((provider) => (
226+
<ModelSelectorLogo
227+
key={provider}
228+
provider={provider}
229+
/>
230+
))}
231+
</ModelSelectorLogoGroup>
232+
{model === m.id ? (
233+
<CheckIcon className="ml-auto size-4" />
234+
) : (
235+
<div className="ml-auto size-4" />
236+
)}
237+
</ModelSelectorItem>
238+
))}
239+
</ModelSelectorGroup>
240+
))}
241+
</ModelSelectorList>
242+
</ModelSelectorContent>
243+
</ModelSelector>
244+
</PromptInputTools>
245+
<PromptInputSubmit status={status} />
246+
</PromptInputFooter>
247+
</PromptInput>
248+
249+
<HeaderControls />
250+
</PromptInputProvider>
251+
</div>
239252
);
240253
};
241254

0 commit comments

Comments
 (0)