86 |
87 |
189 |
190 | )
191 | }
192 |
193 | export default Popup
194 |
--------------------------------------------------------------------------------
/src/assets/bot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piyushgarg-dev/leetcode-whisper-chrome-extension/1ec1df5e1576dcfc638334652a65804613829860/src/assets/bot.png
--------------------------------------------------------------------------------
/src/assets/leetcode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piyushgarg-dev/leetcode-whisper-chrome-extension/1ec1df5e1576dcfc638334652a65804613829860/src/assets/leetcode.png
--------------------------------------------------------------------------------
/src/assets/leetcode.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piyushgarg-dev/leetcode-whisper-chrome-extension/1ec1df5e1576dcfc638334652a65804613829860/src/assets/leetcode.webp
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/user.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piyushgarg-dev/leetcode-whisper-chrome-extension/1ec1df5e1576dcfc638334652a65804613829860/src/assets/user.webp
--------------------------------------------------------------------------------
/src/background.js:
--------------------------------------------------------------------------------
1 | chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
2 | if (message.action === 'openPopup') {
3 | chrome.action.openPopup() // Opens the popup programmatically
4 | }
5 | })
6 |
--------------------------------------------------------------------------------
/src/components/Show.tsx:
--------------------------------------------------------------------------------
1 | import { Spinner } from './ui/spinner'
2 |
3 | type Props = {
4 | show: boolean
5 | children: React.ReactNode
6 | }
7 |
8 | /**
9 | * A component that conditionally renders its children based on the `show` prop.
10 | *
11 | * @param {Props} props - The component properties.
12 | * @param {boolean} props.show - Whether to show the children.
13 | * @param {ReactNode} props.children - The child elements to render.
14 | * @returns {React.ReactNode} - The rendered component.
15 | */
16 | const Show: React.FC
88 |
188 |
89 | 
95 |
96 |
97 |
104 |
151 | {submitMessage ? (
152 | 98 | LeetCode Whisper 99 |
100 |101 | Your Companion to Beat LeetCode! 102 |
103 |
166 | {submitMessage.state === 'error' ? (
167 |
172 | ) : (
173 | ''
174 | )}
175 | {submitMessage.message}
168 | ) : ( 169 |{submitMessage.message}
170 | )} 171 |
176 |
187 | 177 | Want more features? 178 | 183 | Request a feature! 184 | 185 |
186 |
21 |
23 | )
24 | }
25 | export default Show
26 |
--------------------------------------------------------------------------------
/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as AccordionPrimitive from '@radix-ui/react-accordion'
3 | import { ChevronDown } from 'lucide-react'
4 |
5 | import { cn } from '@/lib/utils'
6 |
7 | const Accordion = AccordionPrimitive.Root
8 |
9 | const AccordionItem = React.forwardRef<
10 | React.ElementRef{children}
51 |
120 | {buttonContent}
121 |
122 | )
123 | }
124 | )
125 |
126 | Button.displayName = 'Button'
127 |
--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import { cn } from '@/lib/utils'
4 |
5 | const Card = React.forwardRef<
6 | HTMLDivElement,
7 | React.HTMLAttributes
101 | {label && (
102 |
108 | )}
109 | {prefix && (
110 |
175 | )
176 | }
177 | )
178 |
179 | Input.displayName = 'Input'
180 |
181 | const HideApiKey = React.forwardRef<
182 | HTMLInputElement,
183 | Omit
117 | {prefix}
118 | {prefixStyling && }
119 |
120 | )}
121 |
135 | {suffix && (
136 |
143 | {suffixStyling && (
144 |
145 | )}
146 | {suffix}
147 |
148 | )}
149 | {error && (
150 |
154 |
169 |
172 |
173 | )}
174 |
189 |
196 |
219 |
220 | {/* hides browsers password toggles */}
221 |
229 |
230 | )
231 | })
232 | HideApiKey.displayName = 'HideApiKey'
233 |
234 | export { Input, HideApiKey }
235 |
--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as LabelPrimitive from '@radix-ui/react-label'
3 | import { cva, type VariantProps } from 'class-variance-authority'
4 |
5 | import { cn } from '@/lib/utils'
6 |
7 | const labelVariants = cva(
8 | 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
9 | )
10 |
11 | const Label = React.forwardRef<
12 | React.ElementRef
32 |
45 | );
46 | },
47 | );
48 |
49 | Spinner.displayName = "Spinner";
50 |
51 | export { Spinner };
52 |
--------------------------------------------------------------------------------
/src/constants/prompt.ts:
--------------------------------------------------------------------------------
1 | export const SYSTEM_PROMPT = `
2 | You are LeetCode Whisper, a friendly and conversational AI helper for students solving LeetCode problems. Your goal is to guide students step-by-step toward a solution without giving the full answer immediately.
3 |
4 | Input Context:
5 |
6 | Problem Statement: {{problem_statement}}
7 | User Code: {{user_code}}
8 | Programming Language: {{programming_language}}
9 |
10 | Your Tasks:
11 |
12 | Analyze User Code:
13 |
14 | - Spot mistakes or inefficiencies in {{user_code}}.
15 | - Start with small feedback and ask friendly follow-up questions, like where the user needs help.
16 | - Keep the conversation flowing naturally, like you're chatting with a friend. 😊
17 |
18 | Provide Hints:
19 |
20 | - Share concise, relevant hints based on {{problem_statement}}.
21 | - Let the user lead the conversation—give hints only when necessary.
22 | - Avoid overwhelming the user with too many hints at once.
23 |
24 | Suggest Code Snippets:
25 |
26 | - Share tiny, focused code snippets only when they’re needed to illustrate a point.
27 |
28 | Output Requirements:
29 |
30 | - Keep the feedback short, friendly, and easy to understand.
31 | - snippet should always be code only and is optional.
32 | - Do not say hey everytime
33 | - Keep making feedback more personal and short overrime.
34 | - Limit the words in feedback. Only give what is really required to the user as feedback.
35 | - Hints must be crisp, short and clear
36 |
37 | Tone & Style:
38 |
39 | - Be kind, supportive, and approachable.
40 | - Use emojis like 🌟, 🙌, or ✅ to make the conversation fun and engaging.
41 | - Avoid long, formal responses—be natural and conversational.
42 |
43 | `
44 |
--------------------------------------------------------------------------------
/src/constants/valid_modals.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * List of valid models that can be used in the application.
3 | */
4 | export const VALID_MODELS = [
5 | {
6 | model: 'gpt-3.5-turbo',
7 | name: 'openai_3.5_turbo',
8 | display: 'GPT-3.5 Turbo',
9 | },
10 | {
11 | model: 'gpt-4o',
12 | name: 'openai_4o',
13 | display: 'GPT-4 Optimized',
14 | },
15 | {
16 | model: 'gemini-1.5-pro-latest',
17 | name: 'gemini_1.5_pro',
18 | display: 'Gemini 1.5 Pro (Latest)',
19 | },
20 | ]
21 |
22 | /**
23 | * Type of valid models that can be used in the application.
24 | */
25 | export type ValidModel = 'openai_3.5_turbo' | 'openai_4o' | 'gemini_1.5_pro'
26 |
--------------------------------------------------------------------------------
/src/content.tsx:
--------------------------------------------------------------------------------
1 | import './index.css'
2 |
3 | import { createRoot } from 'react-dom/client'
4 | import { StrictMode } from 'react'
5 | import ContentPage from '@/content/content'
6 |
7 | const root = document.createElement('div')
8 | root.id = '__leetcode_ai_whisper_container'
9 | document.body.append(root)
10 |
11 | createRoot(root).render(
12 |
33 | {[...Array(12)].map((_, i) => (
34 |
42 | ))}
43 |
44 |
274 |
284 |
285 |
288 |
289 |
290 |
291 |
297 |
299 |
300 |
301 |
303 |
304 |
305 | heandelModel(v as ValidModel)}
308 | >
309 | {VALID_MODELS.map((modelOption) => (
310 |
314 | {modelOption.display}
315 |
316 | ))}
317 |
318 |
319 |
320 |
321 |
322 |
326 | (e.currentTarget.style.backgroundColor =
327 | 'rgb(185 28 28 / 0.35)')
328 | }
329 | onMouseLeave={(e) => (e.currentTarget.style.backgroundColor = '')}
330 | >
331 |
333 |
334 |
335 |
336 |
275 |
283 |
276 |
278 |
279 |
282 | Need Help?
280 |Always online
281 |
345 |
351 |
352 | )}
353 | {chatHistory.map((message, index) => (
354 |
363 | <>
364 |
372 | {message.content?.hints &&
373 | message.content.hints.length > 0 && (
374 |
375 | Hints 👀
376 |
377 |
383 |
384 | )}
385 | {message.content?.snippet && (
386 |
387 | Code 🧑🏻💻
388 |
389 |
390 |
442 |
443 | )}
444 |
445 | )}
446 |
447 |
448 | ))}
449 | {isResponseLoading && (
450 | 365 | {typeof message.content === 'string' 366 | ? message.content 367 | : message.content.feedback} 368 |
369 | 370 | {!(typeof message.content === 'string') && ( 371 |-
378 | {message.content?.hints?.map((e) => (
379 |
- {e} 380 | ))} 381 |
391 |
441 |
392 | {
394 | if (typeof message.content !== 'string')
395 | navigator.clipboard.writeText(
396 | `${message.content?.snippet}`
397 | )
398 | }}
399 | className="absolute right-2 top-2 h-4 w-4"
400 | />
401 |
409 | {({
410 | className,
411 | style,
412 | tokens,
413 | getLineProps,
414 | getTokenProps,
415 | }) => (
416 |
439 |
440 |
423 | {tokens.map((line, i) => (
424 |
428 | {line.map((token, key) => (
429 |
433 | ))}
434 |
435 | ))}
436 |
437 | )}
438 |
451 |
452 |
453 | )}
454 |
455 |
458 |
462 | )}
463 | 459 | No messages yet. 460 |
461 |
566 | {!modal || !apiKey ? (
567 | !chatboxExpanded ? null : (
568 | <>
569 |
570 |
571 |
622 |
623 |
624 | )
625 | ) : (
626 |
644 | )
645 | }
646 |
647 | export default ContentPage
648 |
--------------------------------------------------------------------------------
/src/content/util.ts:
--------------------------------------------------------------------------------
1 | export function extractCode(htmlContent: NodeListOf
572 | {!selectedModel && (
573 | <>
574 |
621 | 575 | Please configure the extension before using this 576 | feature. 577 |
578 | 585 | 586 | )} 587 | {selectedModel && ( 588 | <> 589 |590 | We couldn't find any API key for selected model{' '} 591 | 592 | {selectedModel} 593 | 594 |
595 |you can select another models
596 | 618 | 619 | )} 620 |
636 |
642 |
643 | {children}
45 |