Moved to react instead of vanilla js and added the basic skeleton of the plgin

1 files changed, 45 insertions, 0 deletions

diff --git a/src/components/PromptAI.tsx b/src/components/PromptAI.tsx
new file mode 100644
index 0000000..7a6b361
--- /dev/null
+++ b/src/components/PromptAI.tsx
@@ -0,0 +1,45 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { askAI, defineWord, DivideTaskIntoSubTasks } from '../ollama';
+
+export const PromptAI = ({ type }) => {
+
+  const placeholder = type === 'prompt' ? "Prompt..." : "Define..."
+  const [inputValue, setInputValue] = useState('');
+  const [hitEnter, setHitEnter] = useState(false)
+
+  useEffect(() => {
+    if (hitEnter) {
+      if (type === 'prompt') {
+        askAI(inputValue)
+      } else {
+        defineWord(inputValue)
+      }
+    }
+  }, [hitEnter])
+
+  const handleInputChange = (e) => {
+    const query = e.target.value;
+    setInputValue(query);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      setHitEnter(true)
+    }
+  }
+  return (
+    !hitEnter ? (
+      <div className='w-screen text-center'>
+        <input
+          autoFocus
+          type="text"
+          placeholder={placeholder}
+          value={inputValue}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          className="bg-gray-700 text-white px-2 py-1 rounded-md dark:bg-gray-800 inline-block w-3/4"
+        />
+      </div>
+    ) : null
+  )
+}