Hugging Face's logo

Spaces:
harlley
/
basic-agentic-ui
Running

App Files Community
harlley commited on
Commit
e06733f
·
1 Parent(s): f48b54b

update index title, remove unused components, and improve code formatting

Browse files
Files changed (11) hide show
  1. index.html +2 -2
  2. src/components/ChatSidebar.tsx +0 -3
  3. src/components/ColorControlForm.tsx +1 -1
  4. src/components/SidebarHeader.tsx +0 -20
  5. src/components/component-example.tsx +0 -493
  6. src/components/example.tsx +0 -54
  7. src/hooks/useTranslator.ts +1 -0
  8. src/lib/translationLanguages.ts +7 -7
  9. src/lib/translatorTypes.ts +5 -1
  10. src/store/useColorStore.ts +1 -1
  11. src/worker.ts +3 -1
index.html CHANGED
@@ -1,10 +1,10 @@
1
- <!doctype html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>vite-app</title>
8
  </head>
9
  <body>
10
  <div id="root"></div>
 
1
+ <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Basic Agentic UI</title>
8
  </head>
9
  <body>
10
  <div id="root"></div>
src/components/ChatSidebar.tsx CHANGED
@@ -5,7 +5,6 @@ import {
5
  InputGroupInput,
6
  } from "@/components/ui/input-group";
7
  import { type Message, MessageBubble } from "./MessageBubble";
8
- import { SidebarHeader } from "./SidebarHeader";
9
 
10
  type ChatSidebarProps = {
11
  messages: readonly Message[];
@@ -14,8 +13,6 @@ type ChatSidebarProps = {
14
  export function ChatSidebar({ messages }: ChatSidebarProps) {
15
  return (
16
  <aside className="order-2 md:order-1 w-full md:w-80 lg:w-96 flex flex-col border-t md:border-t-0 md:border-r border-border/50 bg-sidebar/50 backdrop-blur-md shrink-0 h-[45vh] md:h-full transition-all duration-300">
17
- <SidebarHeader />
18
-
19
  <div className="flex-1 overflow-y-auto p-6 space-y-6 scrollbar-thin scrollbar-thumb-border">
20
  {messages.map((msg) => (
21
  <MessageBubble key={msg.id} message={msg} />
 
5
  InputGroupInput,
6
  } from "@/components/ui/input-group";
7
  import { type Message, MessageBubble } from "./MessageBubble";
 
8
 
9
  type ChatSidebarProps = {
10
  messages: readonly Message[];
 
13
  export function ChatSidebar({ messages }: ChatSidebarProps) {
14
  return (
15
  <aside className="order-2 md:order-1 w-full md:w-80 lg:w-96 flex flex-col border-t md:border-t-0 md:border-r border-border/50 bg-sidebar/50 backdrop-blur-md shrink-0 h-[45vh] md:h-full transition-all duration-300">
 
 
16
  <div className="flex-1 overflow-y-auto p-6 space-y-6 scrollbar-thin scrollbar-thumb-border">
17
  {messages.map((msg) => (
18
  <MessageBubble key={msg.id} message={msg} />
src/components/ColorControlForm.tsx CHANGED
@@ -16,9 +16,9 @@ import {
16
  DEFAULT_SOURCE_LANG,
17
  isSourceLanguage,
18
  SOURCE_LANGUAGES,
19
- type SourceLanguage,
20
  sourceLanguageLabel,
21
  } from "@/lib/translationLanguages";
 
22
 
23
  type ColorControlFormProps = {
24
  onColorChange: (color: string) => void;
 
16
  DEFAULT_SOURCE_LANG,
17
  isSourceLanguage,
18
  SOURCE_LANGUAGES,
 
19
  sourceLanguageLabel,
20
  } from "@/lib/translationLanguages";
21
+ import type { SourceLanguage } from "@/lib/translatorTypes";
22
 
23
  type ColorControlFormProps = {
24
  onColorChange: (color: string) => void;
src/components/SidebarHeader.tsx DELETED
@@ -1,20 +0,0 @@
1
- import { IconVolume } from "@tabler/icons-react";
2
-
3
- export function SidebarHeader() {
4
- return (
5
- <header className="px-6 py-5 border-b border-border/50 flex items-center justify-between bg-transparent">
6
- <div className="flex items-center gap-3">
7
- <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
8
- <IconVolume size={18} />
9
- </div>
10
- <div>
11
- <h2 className="font-bold text-sm tracking-tight">ElevenLabs Agent</h2>
12
- <p className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold flex items-center gap-1">
13
- <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
14
- Online
15
- </p>
16
- </div>
17
- </div>
18
- </header>
19
- );
20
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/component-example.tsx DELETED
@@ -1,493 +0,0 @@
1
- import {
2
- IconBell,
3
- IconBluetooth,
4
- IconCreditCard,
5
- IconDeviceDesktop,
6
- IconDeviceFloppy,
7
- IconDots,
8
- IconDotsVertical,
9
- IconDownload,
10
- IconEye,
11
- IconFile,
12
- IconFileCode,
13
- IconFileText,
14
- IconFolder,
15
- IconFolderOpen,
16
- IconFolderSearch,
17
- IconHelpCircle,
18
- IconKeyboard,
19
- IconLanguage,
20
- IconLayout,
21
- IconLogout,
22
- IconMail,
23
- IconMoon,
24
- IconPalette,
25
- IconPlus,
26
- IconSettings,
27
- IconShield,
28
- IconSun,
29
- IconUser,
30
- } from "@tabler/icons-react";
31
- import * as React from "react";
32
- import { Example, ExampleWrapper } from "@/components/example";
33
- import {
34
- AlertDialog,
35
- AlertDialogAction,
36
- AlertDialogCancel,
37
- AlertDialogContent,
38
- AlertDialogDescription,
39
- AlertDialogFooter,
40
- AlertDialogHeader,
41
- AlertDialogMedia,
42
- AlertDialogTitle,
43
- AlertDialogTrigger,
44
- } from "@/components/ui/alert-dialog";
45
- import { Badge } from "@/components/ui/badge";
46
- import { Button } from "@/components/ui/button";
47
- import {
48
- Card,
49
- CardAction,
50
- CardContent,
51
- CardDescription,
52
- CardFooter,
53
- CardHeader,
54
- CardTitle,
55
- } from "@/components/ui/card";
56
- import {
57
- Combobox,
58
- ComboboxContent,
59
- ComboboxEmpty,
60
- ComboboxInput,
61
- ComboboxItem,
62
- ComboboxList,
63
- } from "@/components/ui/combobox";
64
- import {
65
- DropdownMenu,
66
- DropdownMenuCheckboxItem,
67
- DropdownMenuContent,
68
- DropdownMenuGroup,
69
- DropdownMenuItem,
70
- DropdownMenuLabel,
71
- DropdownMenuPortal,
72
- DropdownMenuRadioGroup,
73
- DropdownMenuRadioItem,
74
- DropdownMenuSeparator,
75
- DropdownMenuShortcut,
76
- DropdownMenuSub,
77
- DropdownMenuSubContent,
78
- DropdownMenuSubTrigger,
79
- DropdownMenuTrigger,
80
- } from "@/components/ui/dropdown-menu";
81
- import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
82
- import { Input } from "@/components/ui/input";
83
- import {
84
- Select,
85
- SelectContent,
86
- SelectGroup,
87
- SelectItem,
88
- SelectTrigger,
89
- SelectValue,
90
- } from "@/components/ui/select";
91
- import { Textarea } from "@/components/ui/textarea";
92
-
93
- export function ComponentExample() {
94
- return (
95
- <ExampleWrapper>
96
- <CardExample />
97
- <FormExample />
98
- </ExampleWrapper>
99
- );
100
- }
101
-
102
- function CardExample() {
103
- return (
104
- <Example title="Card" className="items-center justify-center">
105
- <Card className="relative w-full max-w-sm overflow-hidden pt-0">
106
- <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
107
- <img
108
- src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
109
- alt="Abstract colorful artwork by mymind on Unsplash"
110
- title="Photo by mymind on Unsplash"
111
- className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
112
- />
113
- <CardHeader>
114
- <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
115
- <CardDescription>
116
- Switch to the improved way to explore your data, with natural
117
- language. Monitoring will no longer be available on the Pro plan in
118
- November, 2025
119
- </CardDescription>
120
- </CardHeader>
121
- <CardFooter>
122
- <AlertDialog>
123
- <AlertDialogTrigger render={<Button />}>
124
- <IconPlus data-icon="inline-start" />
125
- Show Dialog
126
- </AlertDialogTrigger>
127
- <AlertDialogContent size="sm">
128
- <AlertDialogHeader>
129
- <AlertDialogMedia>
130
- <IconBluetooth />
131
- </AlertDialogMedia>
132
- <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
133
- <AlertDialogDescription>
134
- Do you want to allow the USB accessory to connect to this
135
- device?
136
- </AlertDialogDescription>
137
- </AlertDialogHeader>
138
- <AlertDialogFooter>
139
- <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
140
- <AlertDialogAction>Allow</AlertDialogAction>
141
- </AlertDialogFooter>
142
- </AlertDialogContent>
143
- </AlertDialog>
144
- <Badge variant="secondary" className="ml-auto">
145
- Warning
146
- </Badge>
147
- </CardFooter>
148
- </Card>
149
- </Example>
150
- );
151
- }
152
-
153
- const frameworks = [
154
- "Next.js",
155
- "SvelteKit",
156
- "Nuxt.js",
157
- "Remix",
158
- "Astro",
159
- ] as const;
160
-
161
- const roleItems = [
162
- { label: "Developer", value: "developer" },
163
- { label: "Designer", value: "designer" },
164
- { label: "Manager", value: "manager" },
165
- { label: "Other", value: "other" },
166
- ];
167
-
168
- function FormExample() {
169
- const [notifications, setNotifications] = React.useState({
170
- email: true,
171
- sms: false,
172
- push: true,
173
- });
174
- const [theme, setTheme] = React.useState("light");
175
-
176
- return (
177
- <Example title="Form">
178
- <Card className="w-full max-w-md">
179
- <CardHeader>
180
- <CardTitle>User Information</CardTitle>
181
- <CardDescription>Please fill in your details below</CardDescription>
182
- <CardAction>
183
- <DropdownMenu>
184
- <DropdownMenuTrigger
185
- render={<Button variant="ghost" size="icon" />}
186
- >
187
- <IconDotsVertical />
188
- <span className="sr-only">More options</span>
189
- </DropdownMenuTrigger>
190
- <DropdownMenuContent align="end" className="w-56">
191
- <DropdownMenuGroup>
192
- <DropdownMenuLabel>File</DropdownMenuLabel>
193
- <DropdownMenuItem>
194
- <IconFile />
195
- New File
196
- <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
197
- </DropdownMenuItem>
198
- <DropdownMenuItem>
199
- <IconFolder />
200
- New Folder
201
- <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
202
- </DropdownMenuItem>
203
- <DropdownMenuSub>
204
- <DropdownMenuSubTrigger>
205
- <IconFolderOpen />
206
- Open Recent
207
- </DropdownMenuSubTrigger>
208
- <DropdownMenuPortal>
209
- <DropdownMenuSubContent>
210
- <DropdownMenuGroup>
211
- <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
212
- <DropdownMenuItem>
213
- <IconFileCode />
214
- Project Alpha
215
- </DropdownMenuItem>
216
- <DropdownMenuItem>
217
- <IconFileCode />
218
- Project Beta
219
- </DropdownMenuItem>
220
- <DropdownMenuSub>
221
- <DropdownMenuSubTrigger>
222
- <IconDots />
223
- More Projects
224
- </DropdownMenuSubTrigger>
225
- <DropdownMenuPortal>
226
- <DropdownMenuSubContent>
227
- <DropdownMenuItem>
228
- <IconFileCode />
229
- Project Gamma
230
- </DropdownMenuItem>
231
- <DropdownMenuItem>
232
- <IconFileCode />
233
- Project Delta
234
- </DropdownMenuItem>
235
- </DropdownMenuSubContent>
236
- </DropdownMenuPortal>
237
- </DropdownMenuSub>
238
- </DropdownMenuGroup>
239
- <DropdownMenuSeparator />
240
- <DropdownMenuGroup>
241
- <DropdownMenuItem>
242
- <IconFolderSearch />
243
- Browse...
244
- </DropdownMenuItem>
245
- </DropdownMenuGroup>
246
- </DropdownMenuSubContent>
247
- </DropdownMenuPortal>
248
- </DropdownMenuSub>
249
- <DropdownMenuSeparator />
250
- <DropdownMenuItem>
251
- <IconDeviceFloppy />
252
- Save
253
- <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
254
- </DropdownMenuItem>
255
- <DropdownMenuItem>
256
- <IconDownload />
257
- Export
258
- <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
259
- </DropdownMenuItem>
260
- </DropdownMenuGroup>
261
- <DropdownMenuSeparator />
262
- <DropdownMenuGroup>
263
- <DropdownMenuLabel>View</DropdownMenuLabel>
264
- <DropdownMenuCheckboxItem
265
- checked={notifications.email}
266
- onCheckedChange={(checked) =>
267
- setNotifications({
268
- ...notifications,
269
- email: checked === true,
270
- })
271
- }
272
- >
273
- <IconEye />
274
- Show Sidebar
275
- </DropdownMenuCheckboxItem>
276
- <DropdownMenuCheckboxItem
277
- checked={notifications.sms}
278
- onCheckedChange={(checked) =>
279
- setNotifications({
280
- ...notifications,
281
- sms: checked === true,
282
- })
283
- }
284
- >
285
- <IconLayout />
286
- Show Status Bar
287
- </DropdownMenuCheckboxItem>
288
- <DropdownMenuSub>
289
- <DropdownMenuSubTrigger>
290
- <IconPalette />
291
- Theme
292
- </DropdownMenuSubTrigger>
293
- <DropdownMenuPortal>
294
- <DropdownMenuSubContent>
295
- <DropdownMenuGroup>
296
- <DropdownMenuLabel>Appearance</DropdownMenuLabel>
297
- <DropdownMenuRadioGroup
298
- value={theme}
299
- onValueChange={setTheme}
300
- >
301
- <DropdownMenuRadioItem value="light">
302
- <IconSun />
303
- Light
304
- </DropdownMenuRadioItem>
305
- <DropdownMenuRadioItem value="dark">
306
- <IconMoon />
307
- Dark
308
- </DropdownMenuRadioItem>
309
- <DropdownMenuRadioItem value="system">
310
- <IconDeviceDesktop />
311
- System
312
- </DropdownMenuRadioItem>
313
- </DropdownMenuRadioGroup>
314
- </DropdownMenuGroup>
315
- </DropdownMenuSubContent>
316
- </DropdownMenuPortal>
317
- </DropdownMenuSub>
318
- </DropdownMenuGroup>
319
- <DropdownMenuSeparator />
320
- <DropdownMenuGroup>
321
- <DropdownMenuLabel>Account</DropdownMenuLabel>
322
- <DropdownMenuItem>
323
- <IconUser />
324
- Profile
325
- <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
326
- </DropdownMenuItem>
327
- <DropdownMenuItem>
328
- <IconCreditCard />
329
- Billing
330
- </DropdownMenuItem>
331
- <DropdownMenuSub>
332
- <DropdownMenuSubTrigger>
333
- <IconSettings />
334
- Settings
335
- </DropdownMenuSubTrigger>
336
- <DropdownMenuPortal>
337
- <DropdownMenuSubContent>
338
- <DropdownMenuGroup>
339
- <DropdownMenuLabel>Preferences</DropdownMenuLabel>
340
- <DropdownMenuItem>
341
- <IconKeyboard />
342
- Keyboard Shortcuts
343
- </DropdownMenuItem>
344
- <DropdownMenuItem>
345
- <IconLanguage />
346
- Language
347
- </DropdownMenuItem>
348
- <DropdownMenuSub>
349
- <DropdownMenuSubTrigger>
350
- <IconBell />
351
- Notifications
352
- </DropdownMenuSubTrigger>
353
- <DropdownMenuPortal>
354
- <DropdownMenuSubContent>
355
- <DropdownMenuGroup>
356
- <DropdownMenuLabel>
357
- Notification Types
358
- </DropdownMenuLabel>
359
- <DropdownMenuCheckboxItem
360
- checked={notifications.push}
361
- onCheckedChange={(checked) =>
362
- setNotifications({
363
- ...notifications,
364
- push: checked === true,
365
- })
366
- }
367
- >
368
- <IconBell />
369
- Push Notifications
370
- </DropdownMenuCheckboxItem>
371
- <DropdownMenuCheckboxItem
372
- checked={notifications.email}
373
- onCheckedChange={(checked) =>
374
- setNotifications({
375
- ...notifications,
376
- email: checked === true,
377
- })
378
- }
379
- >
380
- <IconMail />
381
- Email Notifications
382
- </DropdownMenuCheckboxItem>
383
- </DropdownMenuGroup>
384
- </DropdownMenuSubContent>
385
- </DropdownMenuPortal>
386
- </DropdownMenuSub>
387
- </DropdownMenuGroup>
388
- <DropdownMenuSeparator />
389
- <DropdownMenuGroup>
390
- <DropdownMenuItem>
391
- <IconShield />
392
- Privacy & Security
393
- </DropdownMenuItem>
394
- </DropdownMenuGroup>
395
- </DropdownMenuSubContent>
396
- </DropdownMenuPortal>
397
- </DropdownMenuSub>
398
- </DropdownMenuGroup>
399
- <DropdownMenuSeparator />
400
- <DropdownMenuGroup>
401
- <DropdownMenuItem>
402
- <IconHelpCircle />
403
- Help & Support
404
- </DropdownMenuItem>
405
- <DropdownMenuItem>
406
- <IconFileText />
407
- Documentation
408
- </DropdownMenuItem>
409
- </DropdownMenuGroup>
410
- <DropdownMenuSeparator />
411
- <DropdownMenuGroup>
412
- <DropdownMenuItem variant="destructive">
413
- <IconLogout />
414
- Sign Out
415
- <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
416
- </DropdownMenuItem>
417
- </DropdownMenuGroup>
418
- </DropdownMenuContent>
419
- </DropdownMenu>
420
- </CardAction>
421
- </CardHeader>
422
- <CardContent>
423
- <form>
424
- <FieldGroup>
425
- <div className="grid grid-cols-2 gap-4">
426
- <Field>
427
- <FieldLabel htmlFor="small-form-name">Name</FieldLabel>
428
- <Input
429
- id="small-form-name"
430
- placeholder="Enter your name"
431
- required
432
- />
433
- </Field>
434
- <Field>
435
- <FieldLabel htmlFor="small-form-role">Role</FieldLabel>
436
- <Select items={roleItems} defaultValue={null}>
437
- <SelectTrigger id="small-form-role">
438
- <SelectValue />
439
- </SelectTrigger>
440
- <SelectContent>
441
- <SelectGroup>
442
- {roleItems.map((item) => (
443
- <SelectItem key={item.value} value={item.value}>
444
- {item.label}
445
- </SelectItem>
446
- ))}
447
- </SelectGroup>
448
- </SelectContent>
449
- </Select>
450
- </Field>
451
- </div>
452
- <Field>
453
- <FieldLabel htmlFor="small-form-framework">
454
- Framework
455
- </FieldLabel>
456
- <Combobox items={frameworks}>
457
- <ComboboxInput
458
- id="small-form-framework"
459
- placeholder="Select a framework"
460
- required
461
- />
462
- <ComboboxContent>
463
- <ComboboxEmpty>No frameworks found.</ComboboxEmpty>
464
- <ComboboxList>
465
- {(item) => (
466
- <ComboboxItem key={item} value={item}>
467
- {item}
468
- </ComboboxItem>
469
- )}
470
- </ComboboxList>
471
- </ComboboxContent>
472
- </Combobox>
473
- </Field>
474
- <Field>
475
- <FieldLabel htmlFor="small-form-comments">Comments</FieldLabel>
476
- <Textarea
477
- id="small-form-comments"
478
- placeholder="Add any additional comments"
479
- />
480
- </Field>
481
- <Field orientation="horizontal">
482
- <Button type="submit">Submit</Button>
483
- <Button variant="outline" type="button">
484
- Cancel
485
- </Button>
486
- </Field>
487
- </FieldGroup>
488
- </form>
489
- </CardContent>
490
- </Card>
491
- </Example>
492
- );
493
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/example.tsx DELETED
@@ -1,54 +0,0 @@
1
- import { cn } from "@/lib/utils";
2
-
3
- function ExampleWrapper({ className, ...props }: React.ComponentProps<"div">) {
4
- return (
5
- <div className="bg-background w-full">
6
- <div
7
- data-slot="example-wrapper"
8
- className={cn(
9
- "mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl",
10
-
11
- className,
12
- )}
13
- {...props}
14
- />
15
- </div>
16
- );
17
- }
18
-
19
- function Example({
20
- title,
21
- children,
22
- className,
23
- containerClassName,
24
- ...props
25
- }: React.ComponentProps<"div"> & {
26
- title: string;
27
- containerClassName?: string;
28
- }) {
29
- return (
30
- <div
31
- data-slot="example"
32
- className={cn(
33
- "mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none",
34
- containerClassName,
35
- )}
36
- {...props}
37
- >
38
- <div className="text-muted-foreground px-1.5 py-2 text-xs font-medium">
39
- {title}
40
- </div>
41
- <div
42
- data-slot="example-content"
43
- className={cn(
44
- "bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full",
45
- className,
46
- )}
47
- >
48
- {children}
49
- </div>
50
- </div>
51
- );
52
- }
53
-
54
- export { ExampleWrapper, Example };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/hooks/useTranslator.ts CHANGED
@@ -27,6 +27,7 @@ export function useTranslator() {
27
  if (!api) return text;
28
 
29
  setIsLoading(true);
 
30
  try {
31
  return await api.translate(text, srcLang);
32
  } finally {
 
27
  if (!api) return text;
28
 
29
  setIsLoading(true);
30
+
31
  try {
32
  return await api.translate(text, srcLang);
33
  } finally {
src/lib/translationLanguages.ts CHANGED
@@ -1,18 +1,18 @@
 
 
1
  export const ENGLISH_LANG = "eng_Latn" as const;
2
 
3
  export const DEFAULT_SOURCE_LANG = ENGLISH_LANG;
4
 
5
  export const SOURCE_LANGUAGES = [
6
  { value: "eng_Latn", label: "English" },
7
- { value: "por_Latn", label: "Português" },
8
- { value: "spa_Latn", label: "Español" },
9
- { value: "ita_Latn", label: "Italiano" },
10
- { value: "deu_Latn", label: "Deutsch" },
11
- { value: "fra_Latn", label: "Français" },
12
  ] as const;
13
 
14
- export type SourceLanguage = (typeof SOURCE_LANGUAGES)[number]["value"];
15
-
16
  export function isSourceLanguage(value: unknown): value is SourceLanguage {
17
  return SOURCE_LANGUAGES.some((lang) => lang.value === value);
18
  }
 
1
+ import type { SourceLanguage } from "@/lib/translatorTypes";
2
+
3
  export const ENGLISH_LANG = "eng_Latn" as const;
4
 
5
  export const DEFAULT_SOURCE_LANG = ENGLISH_LANG;
6
 
7
  export const SOURCE_LANGUAGES = [
8
  { value: "eng_Latn", label: "English" },
9
+ { value: "por_Latn", label: "Portuguese" },
10
+ { value: "spa_Latn", label: "Spanish" },
11
+ { value: "ita_Latn", label: "Italian" },
12
+ { value: "deu_Latn", label: "German" },
13
+ { value: "fra_Latn", label: "French" },
14
  ] as const;
15
 
 
 
16
  export function isSourceLanguage(value: unknown): value is SourceLanguage {
17
  return SOURCE_LANGUAGES.some((lang) => lang.value === value);
18
  }
src/lib/translatorTypes.ts CHANGED
@@ -1,6 +1,10 @@
 
 
1
  export type TranslationResult = { translation_text: string };
2
 
3
  export type Translator = (
4
  text: string,
5
- options: { src_lang: string; tgt_lang: string },
6
  ) => Promise<TranslationResult[]>;
 
 
 
1
+ import type { SOURCE_LANGUAGES } from "@/lib/translationLanguages";
2
+
3
  export type TranslationResult = { translation_text: string };
4
 
5
  export type Translator = (
6
  text: string,
7
+ options: { src_lang: string; tgt_lang: string }
8
  ) => Promise<TranslationResult[]>;
9
+
10
+ export type SourceLanguage = (typeof SOURCE_LANGUAGES)[number]["value"];
src/store/useColorStore.ts CHANGED
@@ -6,6 +6,6 @@ interface ColorState {
6
  }
7
 
8
  export const useColorStore = create<ColorState>((set) => ({
9
- squareColor: "rebeccapurple", // Default premium color
10
  setSquareColor: (color: string) => set({ squareColor: color }),
11
  }));
 
6
  }
7
 
8
  export const useColorStore = create<ColorState>((set) => ({
9
+ squareColor: "rebeccapurple",
10
  setSquareColor: (color: string) => set({ squareColor: color }),
11
  }));
src/worker.ts CHANGED
@@ -10,7 +10,7 @@ let translatorPromise: Promise<Translator> | null = null;
10
  function getTranslator(): Promise<Translator> {
11
  translatorPromise ??= pipeline(
12
  "translation",
13
- MODEL_ID,
14
  ) as unknown as Promise<Translator>;
15
  return translatorPromise;
16
  }
@@ -20,10 +20,12 @@ const translatorAPI = {
20
  if (!text.trim() || srcLang === DEFAULT_TGT_LANG) return text;
21
 
22
  const translator = await getTranslator();
 
23
  const output = await translator(text, {
24
  src_lang: srcLang,
25
  tgt_lang: DEFAULT_TGT_LANG,
26
  });
 
27
  return output[0]?.translation_text ?? "";
28
  },
29
  };
 
10
  function getTranslator(): Promise<Translator> {
11
  translatorPromise ??= pipeline(
12
  "translation",
13
+ MODEL_ID
14
  ) as unknown as Promise<Translator>;
15
  return translatorPromise;
16
  }
 
20
  if (!text.trim() || srcLang === DEFAULT_TGT_LANG) return text;
21
 
22
  const translator = await getTranslator();
23
+
24
  const output = await translator(text, {
25
  src_lang: srcLang,
26
  tgt_lang: DEFAULT_TGT_LANG,
27
  });
28
+
29
  return output[0]?.translation_text ?? "";
30
  },
31
  };