blob: e4f5924b7b43f47a68e925b3489ee4a30180c71d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
import React, { useState, useEffect, useRef } from 'react';
import { DivideTaskIntoSubTasks, summarize } from '../ollama';
import { PromptAI } from './PromptAI';
function CommandPalette({ options }) {
console.log("rendered commana pallate")
const [inputValue, setInputValue] = useState('');
const [selectedOption, setSelectedOption] = useState<{ label: string }>({ label: "Ask Ai" });
const [filteredOptions, setFilteredOptions] = useState(options);
const [isExecute, setIsExecute] = useState(false)
const inputRef = useRef(null);
useEffect(() => {
// Initially, select the first option.
if (filteredOptions.length > 0) {
setSelectedOption(filteredOptions[0]);
}
}, [filteredOptions]);
const handleInputChange = (e) => {
const query = e.target.value;
setInputValue(query);
// Filter options based on the input.
const results = options.filter((option: { label: string }) =>
option.label.toLowerCase().includes(query.toLowerCase())
);
setFilteredOptions(results);
};
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Tab') {
e.preventDefault();
const currentIndex = filteredOptions.indexOf(selectedOption);
let newIndex = currentIndex;
if (e.key === 'ArrowUp' || (e.shiftKey && e.key == 'Tab')) {
newIndex = (currentIndex - 1 + filteredOptions.length) % filteredOptions.length;
} else if (e.key === 'ArrowDown' || e.key === 'Tab') {
newIndex = (currentIndex + 1) % filteredOptions.length;
}
setSelectedOption(filteredOptions[newIndex]);
} else if (e.key === 'Enter') {
if (selectedOption) {
setIsExecute(true)
setInputValue(selectedOption.label);
if (selectedOption.label === "Divide into subtasks") {
DivideTaskIntoSubTasks()
} else if (selectedOption.label === "Summarize") {
summarize()
}
}
}
};
return (
isExecute && inputValue == "Ask Ai" ? (
<PromptAI type="prompt" />
) : isExecute && inputValue === "Define" ? (
<PromptAI type="define" />
) : !isExecute ? (
<div className='w-screen flex items-center justify-center'>
<div className="rounded-2xl bg-gray-800 text-white p-4 dark:bg-slate-900 dark:text-gray-100 w-3/4">
<input
ref={inputRef}
type="text"
placeholder="AI action..."
value={inputValue}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
id="ai-input"
className="bg-gray-700 text-white px-2 py-1 rounded-md dark:bg-gray-800 w-full"
/>
<ul className="mt-2 max-h-90 overflow-y-auto">
{filteredOptions.map((option: { label: string }, index: number) => (
<li
key={index}
onClick={() => setSelectedOption(option)}
className={`p-2 cursor-pointer ${selectedOption === option ? 'bg-blue-600 text-white border-2 border-blue-500' : ''
} hover:bg-gray-600`}
>
{option.label}
</li>
))}
</ul>
</div>
</div>
) : null
);
}
export default CommandPalette;
|
