aboutsummaryrefslogtreecommitdiff
path: root/src/components/PromptAI.tsx
blob: 6b4616dd81df900e5d1acb77a18175595bc9e177 (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
import React, { KeyboardEventHandler, useEffect, useState } from 'react'
import { askAI, askWithContext, defineWord } from '../ollama';
import { Input } from '@/components/ui/input';

export const PromptAI = ({ type, theme }: { type: string, theme: string }) => {

  const placeholder = type.startsWith('ask') ? "Prompt..." : "Define..."
  const [inputValue, setInputValue] = useState('');
  const [hitEnter, setHitEnter] = useState(false)

  useEffect(() => {
    if (hitEnter) {
      logseq.hideMainUI()
      if (type === 'ask ai') {
        askAI(inputValue, "")
      } else if (type === 'define') {
        defineWord(inputValue)
      } else if (type === 'ask with page context') {
        askWithContext(inputValue, 'page')
      } else if (type === 'ask with block context') {
        askWithContext(inputValue, 'block')
      }
    }
  }, [hitEnter])

  const handleInputChange = (e: any) => {
    const query = e.target.value;
    setInputValue(query);
  };

  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (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={(theme === 'dark' ? "dark text-white dark:bg-gray-800" : "text-black bg-gray-200") + "px-2 py-1 rounded-md inline-block w-3/4"}
        />
      </div>
    ) : null
  )
}