Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit b9890ee

Browse files
bhaumikmaanbhaumikmaan
authored
Merge pull request j4wg#50 from dev-opsss/language-dropdown-feature
Language dropdown feature
2 parents a770472 + bacf4c5 commit b9890ee

File tree

2 files changed

+84
-5
lines changed

2 files changed

+84
-5
lines changed

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,13 @@ The packaged applications will be available in the `release` directory.
248248
- Window remains invisible to specified screen sharing applications
249249
- Start a new problem using [Control or Cmd + R]
250250

251+
6. **Language Selection
252+
253+
- Easily switch between programming languages with a single click
254+
- Use arrow keys for keyboard navigation through available languages
255+
- The system dynamically adapts to any languages added or removed from the codebase
256+
- Your language preference is saved between sessions
257+
251258
## Adding More AI Models
252259

253260
This application is built with extensibility in mind. You can easily add support for additional LLMs alongside the existing OpenAI integration:

‎src/components/Queue/QueueCommands.tsx‎

Lines changed: 77 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState, useEffect, useRef } from "react"
2+
import { createRoot } from "react-dom/client"
23

34
import { useToast } from "../../contexts/toast"
45
import { LanguageSelector } from "../shared/LanguageSelector"
@@ -23,6 +24,56 @@ const QueueCommands: React.FC<QueueCommandsProps> = ({
2324
const tooltipRef = useRef<HTMLDivElement>(null)
2425
const { showToast } = useToast()
2526

27+
// Extract the repeated language selection logic into a separate function
28+
const extractLanguagesAndUpdate = (direction?: 'next' | 'prev') => {
29+
// Create a hidden instance of LanguageSelector to extract languages
30+
const hiddenRenderContainer = document.createElement('div');
31+
hiddenRenderContainer.style.position = 'absolute';
32+
hiddenRenderContainer.style.left = '-9999px';
33+
document.body.appendChild(hiddenRenderContainer);
34+
35+
// Create a root and render the LanguageSelector temporarily
36+
const root = createRoot(hiddenRenderContainer);
37+
root.render(
38+
<LanguageSelector
39+
currentLanguage={currentLanguage}
40+
setLanguage={() => {}}
41+
/>
42+
);
43+
44+
// Use a small delay to ensure the component has rendered
45+
// 50ms is generally enough for React to complete a render cycle
46+
setTimeout(() => {
47+
// Extract options from the rendered select element
48+
const selectElement = hiddenRenderContainer.querySelector('select');
49+
if (selectElement) {
50+
const options = Array.from(selectElement.options);
51+
const values = options.map(opt => opt.value);
52+
53+
// Find current language index
54+
const currentIndex = values.indexOf(currentLanguage);
55+
let newIndex = currentIndex;
56+
57+
if (direction === 'prev') {
58+
// Go to previous language
59+
newIndex = (currentIndex - 1 + values.length) % values.length;
60+
} else {
61+
// Default to next language
62+
newIndex = (currentIndex + 1) % values.length;
63+
}
64+
65+
if (newIndex !== currentIndex) {
66+
setLanguage(values[newIndex]);
67+
window.electronAPI.updateConfig({ language: values[newIndex] });
68+
}
69+
}
70+
71+
// Clean up
72+
root.unmount();
73+
document.body.removeChild(hiddenRenderContainer);
74+
}, 50);
75+
};
76+
2677
useEffect(() => {
2778
let tooltipHeight = 0
2879
if (tooltipRef.current && isTooltipVisible) {
@@ -164,7 +215,7 @@ const QueueCommands: React.FC<QueueCommandsProps> = ({
164215
strokeLinejoin="round"
165216
className="w-3.5 h-3.5"
166217
>
167-
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
218+
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l-.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
168219
<circle cx="12" cy="12" r="3" />
169220
</svg>
170221
</div>
@@ -379,10 +430,31 @@ const QueueCommands: React.FC<QueueCommandsProps> = ({
379430

380431
{/* Separator and Log Out */}
381432
<div className="pt-3 mt-3 border-t border-white/10">
382-
<LanguageSelector
383-
currentLanguage={currentLanguage}
384-
setLanguage={setLanguage}
385-
/>
433+
{/* Simplified Language Selector */}
434+
<div className="mb-3 px-2">
435+
<div
436+
className="flex items-center justify-between cursor-pointer hover:bg-white/10 rounded px-2 py-1 transition-colors"
437+
onClick={() => extractLanguagesAndUpdate('next')}
438+
tabIndex={0}
439+
onKeyDown={(e) => {
440+
if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
441+
extractLanguagesAndUpdate('prev');
442+
} else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
443+
extractLanguagesAndUpdate('next');
444+
}
445+
}}
446+
>
447+
<span className="text-[11px] text-white/70">Language</span>
448+
<div className="flex items-center gap-2">
449+
<span className="text-[11px] text-white/90">{currentLanguage}</span>
450+
<div className="text-white/40 text-[8px]">
451+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-3 h-3">
452+
<path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
453+
</svg>
454+
</div>
455+
</div>
456+
</div>
457+
</div>
386458

387459
{/* API Key Settings */}
388460
<div className="mb-3 px-2 space-y-1">

0 commit comments

Comments
 (0)