41 | {messages.length > 0 && (
42 |
43 | {messages
44 | .filter((m) => m.role !== "system")
45 | .map((message, index) => (
46 |
53 | )}
54 |
70 | {messages.length > 0 && (
71 |
72 |
77 | Clear
78 |
79 |
84 | Copy Conversation
85 |
86 |
87 | )}
88 |
) => {
15 | e.preventDefault();
16 | testKey(text);
17 | };
18 |
19 | useEffect(() => {
20 | if (testSuccess === false) {
21 | } else if (testSuccess === true) {
22 | setApiKey(text);
23 | toast.success("API Key saved");
24 | }
25 | }, [testSuccess, text, setApiKey]);
26 |
27 | return (
28 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/layout/main-layout.tsx:
--------------------------------------------------------------------------------
1 | import { EnterKeyLayout } from "./enter-key/enter-key-layout";
2 | import { PoweredByGroq } from "../shelf/powered-by-groq";
3 | import { PromptLayout } from "./prompt-layout";
4 | import { SettingsLayout } from "./settings/settings-layout";
5 | import { useAppNav } from "@/providers/app-nav";
6 | import { Toaster } from "sonner";
7 |
8 | export function MainLayout() {
9 | const { currentView } = useAppNav();
10 | return (
11 |
12 | {currentView === "key" ? (
13 |
14 | ) : currentView === "settings" ? (
15 |
16 | ) : (
17 |
18 | )}
19 |
20 |
21 |
10 |
12 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/layout/settings/delete-key-button.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import {
3 | Dialog,
4 | DialogContent,
5 | DialogDescription,
6 | DialogFooter,
7 | DialogHeader,
8 | DialogTitle,
9 | DialogTrigger,
10 | } from "@/components/ui/dialog";
11 | import { useSettings } from "@/providers/settings-provider";
12 |
13 | export function DeleteKeyButton() {
14 | const { setApiKey } = useSettings();
15 |
16 | return (
17 |
18 |
19 | Delete API Key
20 |
21 |
22 |
23 | Delete API Key
24 |
25 |
26 | Are you sure you want to delete the API key?
27 |
28 |
29 | setApiKey("")}>
30 | Delete API Key
31 |
32 |
33 |
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/layout/settings/models-combo.tsx:
--------------------------------------------------------------------------------
1 | import { useGroqModels } from "@/hooks/use-groq-models";
2 | import {
3 | DropdownMenu,
4 | DropdownMenuContent,
5 | DropdownMenuItem,
6 | DropdownMenuTrigger,
7 | } from "@/components/ui/dropdown-menu";
8 | import { Button } from "@/components/ui/button";
9 | import { ChevronDown, Loader2 } from "lucide-react";
10 | import { useSettings } from "@/providers/settings-provider";
11 | import { useEffect } from "react";
12 |
13 | export function ModelsCombo() {
14 | const { models = [], isLoading } = useGroqModels();
15 | const { currentModel, setCurrentModel } = useSettings();
16 |
17 | // If the current model is not in the list of models, set the current model to the first model in the list
18 | useEffect(() => {
19 | if (
20 | models.length > 0 &&
21 | !models.filter((model) => model.id === currentModel).length
22 | ) {
23 | setCurrentModel(models[0].id);
24 | }
25 | }, [models, currentModel, setCurrentModel]);
26 |
27 | return (
28 |
29 |
30 |
31 | {currentModel}
32 | {isLoading ? (
33 |
38 |
39 |
40 | {models.map((model) => (
41 | setCurrentModel(model.id)}
44 | >
45 | {model.id}
46 |
47 | ))}
48 |
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/layout/settings/reset-settings-button.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import {
3 | Dialog,
4 | DialogContent,
5 | DialogDescription,
6 | DialogFooter,
7 | DialogHeader,
8 | DialogTitle,
9 | DialogTrigger,
10 | } from "@/components/ui/dialog";
11 | import { useAppNav } from "@/providers/app-nav";
12 | import { useSettings } from "@/providers/settings-provider";
13 | import { useState } from "react";
14 |
15 | export function ResetAllSettingsButton() {
16 | const { resetAllSettings } = useSettings();
17 | const { closeSettings } = useAppNav();
18 | const [open, setOpen] = useState(false);
19 |
20 | const handleReset = () => {
21 | resetAllSettings();
22 | closeSettings();
23 | setOpen(false);
24 | };
25 |
26 | return (
27 |
28 |
29 | Reset All Settings
30 |
31 |
32 |
33 | Reset All Settings
34 |
35 |
36 | Are you sure you want to reset all settings?
37 |
38 |
39 |
40 | Reset All Settings
41 |
42 |
43 |
44 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/layout/settings/settings-layout.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Separator } from "@/components/ui/separator";
3 | import { useSettings } from "@/providers/settings-provider";
4 | import { ModelsCombo } from "./models-combo";
5 | import { X } from "lucide-react";
6 | import { useAppNav } from "@/providers/app-nav";
7 | import { SummaryPrompt } from "./summary-prompt";
8 | import { DeleteKeyButton } from "./delete-key-button";
9 | import { ResetAllSettingsButton } from "./reset-settings-button";
10 | import { TruncateSlider } from "./truncate-slider";
11 |
12 | export function SettingsLayout() {
13 | const { closeSettings } = useAppNav();
14 | return (
15 |
16 |
17 |
Settings
18 |
19 |
21 |
22 |
23 |
25 |
26 |
27 | You can customize the prompt used to summarize the text. This is
28 | useful if you want to change the way the summary is generated.
29 |
30 |
32 |
33 |
34 | Text is truncated to stay within model limits while still providing
35 | meaningful summaries. You can adjust the word limit to balance between
36 | summary completeness and processing speed.
37 |
38 |
40 |
41 | If you want to use a different API key, delete the current key.
42 |
44 |
45 |
46 | Reset all settings to their default values. This will delete all
47 | custom settings and reset the extension to its initial state.
48 |
49 |
51 |
66 | {!noSeparator &&
}
67 |
{title}
68 |
69 | {children}
70 |
71 |
8 | setSummarizePrompt(e.target.value)}
11 | />
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/layout/settings/truncate-slider.tsx:
--------------------------------------------------------------------------------
1 | import { Slider } from "@/components/ui/slider";
2 | import { useGroqModels } from "@/hooks/use-groq-models";
3 | import { formatNumber } from "@/lib/utils";
4 | import { useSettings } from "@/providers/settings-provider";
5 |
6 | declare global {
7 | namespace Groq {
8 | namespace Models {
9 | interface Model {
10 | context_window: number;
11 | }
12 | }
13 | }
14 | }
15 |
16 | export function TruncateSlider() {
17 | const { currentModel, chunkWordLimit, setChunkWordLimit } = useSettings();
18 | const { models = [], getContextWindow } = useGroqModels();
19 |
20 | if (models.length === 0) return null;
21 |
22 | const model = models.find((model) => model.id === currentModel);
23 |
24 | if (!model) return null;
25 |
26 | const contextWindow = getContextWindow(currentModel);
27 |
28 | return (
29 | <>
30 |
31 | {formatNumber(Number.parseInt(chunkWordLimit))} words
32 |
33 | setChunkWordLimit(value[0].toString())}
38 | />
39 |
40 |
41 |
Model:
42 |
{currentModel}
43 |
44 |
45 |
Context window:
46 |
{formatNumber(contextWindow)} tokens
47 |
48 |
24 |
25 | Summarize
27 |
28 | with groq
29 |
30 |
31 |
38 |
39 |
40 |
setSummarySource(pageText)}
47 | >
48 |
51 | {selectionText && (
52 |
setSummarySource(selectionText)}
59 | >
60 |
63 | )}
64 |
65 | {pageTokens && (
66 |
67 |
68 | {formatNumber(pageTokens)} word{pageTokens > 1 ? "s" : ""}
69 |
70 | {selectionText && (
71 |
72 | {formatNumber(selectionTokens)} word
73 | {selectionTokens > 1 ? "s" : ""}
74 |
75 | )}
76 |
77 | )}
78 |
79 |
80 | {!summary && !selectionText && (
81 |
82 |
83 |
85 | You can also select text to
86 | have an option to summarize the selected text.
87 |
88 |
89 |
90 | )}
91 | {summary && (
92 | <>
93 |
94 |
95 |
101 |
103 | {usage && (
104 |
105 |
{formatTime(usage.total_time || 0)}
106 |
107 |
108 | {formatNumber(
109 | usage.completion_tokens / (usage.completion_time || 1),
110 | )}{" "}
111 | T/s
112 |
113 |
114 | )}
115 |
121 | Clear
122 |
123 |
124 |
125 | )}
126 |
7 | {content}
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/shelf/content-block.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { useState } from "react";
3 | import { Button } from "@/components/ui/button";
4 | import { AlignLeft, Copy, Check, ALargeSmall } from "lucide-react";
5 | import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
6 | import { MarkdownBlock } from "./markdown-block";
7 | export function ContentBlock({
8 | content,
9 | noControls,
10 | className,
11 | }: {
12 | content: string;
13 | className?: string;
14 | noControls?: boolean;
15 | }) {
16 | const [isPlainText, setIsPlainText] = useState(false);
17 | const { isCopied, copyToClipboard } = useCopyToClipboard({});
18 | return (
19 |
20 | {!noControls && (
21 |
22 |
23 |
setIsPlainText(true)}
28 | >
29 |
31 |
setIsPlainText(false)}
36 | >
37 |
39 |
40 |
41 | copyToClipboard(content)}
45 | >
46 | {isCopied ?
48 |
49 |
50 | )}
51 |
57 | {isPlainText ? (
58 |
{content}
59 | ) : (
60 |
{content}
61 | )}
62 |
63 |
(
13 | {children}
17 | ),
18 | h2: ({ children }) => {children} ,
19 | h3: ({ children }) => {children} ,
20 | p: ({ children }) => {children}
,
21 | ul: ({ children }) => ,
22 | ol: ({ children }) => (
23 |
24 | ),
25 | li: ({ children }) => {children} ,
26 | }}
27 | >
28 | {children}
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/shelf/mode-toggle.tsx:
--------------------------------------------------------------------------------
1 | import { Moon, Sun } from "lucide-react";
2 | import { Button } from "@/components/ui/button";
3 | import {
4 | DropdownMenu,
5 | DropdownMenuContent,
6 | DropdownMenuItem,
7 | DropdownMenuTrigger,
8 | } from "@/components/ui/dropdown-menu";
9 | import { useTheme } from "@/providers/theme-provider";
10 |
11 | export function ModeToggle() {
12 | const { setTheme } = useTheme();
13 |
14 | return (
15 |
16 |
17 |
22 | Toggle theme
25 |
26 |
27 |
28 | setTheme("light")}>
29 | Light
30 |
31 | setTheme("dark")}>
32 | Dark
33 |
34 | setTheme("system")}>
35 | System
36 |
37 |
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/shelf/powered-by-groq.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Settings } from "lucide-react";
3 | import { useAppNav } from "@/providers/app-nav";
4 |
5 | export function PoweredByGroq() {
6 | const { currentView, openSettings } = useAppNav();
7 | return (
8 |
9 | {currentView === "summary" && (
10 |
16 |
18 | )}
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/shelf/textarea-autosize.tsx:
--------------------------------------------------------------------------------
1 | import { Textarea, type TextareaProps } from "@/components/ui/textarea";
2 | import { useWindowResize } from "@/hooks/use-window-resize";
3 | import React, { useCallback, useEffect, useRef } from "react";
4 |
5 | const TextareaAutosize = React.forwardRef(
6 | ({ className, value, autoFocus, ...props }, ref) => {
7 | const textareaRef = useRef(null);
8 |
9 | const adjustHeight = useCallback(() => {
10 | const textarea = textareaRef.current;
11 | if (textarea) {
12 | textarea.style.height = "auto";
13 | if (String(value)) {
14 | textarea.style.height = `${textarea.scrollHeight}px`;
15 | }
16 | }
17 | }, [value]);
18 |
19 | useWindowResize(adjustHeight);
20 |
21 | useEffect(() => {
22 | if (value) {
23 | adjustHeight();
24 | }
25 | }, [value, adjustHeight]);
26 |
27 | useEffect(() => {
28 | if (autoFocus) {
29 | textareaRef.current?.focus();
30 | }
31 | }, [autoFocus]);
32 |
33 | return (
34 |