aboutsummaryrefslogtreecommitdiff
path: root/src/components/CommandPallete.tsx
diff options
context:
space:
mode:
authoromagdy7 <omar.professional8777@gmail.com>2023-11-05 22:22:37 +0200
committeromagdy7 <omar.professional8777@gmail.com>2023-11-05 22:22:37 +0200
commit121becd9cf52c735e2d33032873fca8fc6e3db54 (patch)
treeafcbd0697808faf66d7cb84f2852d979b5da8550 /src/components/CommandPallete.tsx
parent7c9ade2c19b5b65721918dd291de54bcd4dc805b (diff)
downloadollama-logseq-121becd9cf52c735e2d33032873fca8fc6e3db54.tar.xz
ollama-logseq-121becd9cf52c735e2d33032873fca8fc6e3db54.zip
Added all the main features of the plugin and also added setting and made the plugin respect themeing
Diffstat (limited to 'src/components/CommandPallete.tsx')
-rw-r--r--src/components/CommandPallete.tsx96
1 files changed, 0 insertions, 96 deletions
diff --git a/src/components/CommandPallete.tsx b/src/components/CommandPallete.tsx
deleted file mode 100644
index e4f5924..0000000
--- a/src/components/CommandPallete.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-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;