Chat with job description using Gemini Nano

ChromeAI.js

"use client"
import { useEffect, useState } from "react"
import { MessageCircle } from "lucide-react"
import { Input } from "./ui/input"
import ReactMarkdown from 'react-markdown'


const ChromeAI = ({ text, title }) => {
  const [canShow, setCanShow] = useState(false);
  const [show, setShow] = useState(false);
  const [question, setQuestion] = useState("");
  const [answer, setAnswer] = useState("");

  useEffect(() => {
    async function checkCanShow() {
      const canCreate = await window.ai?.canCreateTextSession();

      console.log(canCreate)

      if (canCreate == "readily") {

        setCanShow(true)
      }
    }

    checkCanShow();
  }, [])

  function extractContent(s) {
    var span = document.createElement('span');
    span.innerHTML = s;
    return span.textContent || span.innerText;
  };
  
  const newtext = extractContent(text)

  const handleSendMessage = async () => {
    const canCreate = await window.ai.canCreateTextSession();

    if (canCreate !== "no") {
      const session = await window.ai.createTextSession();

      const stream = session.promptStreaming(`You are a friendly assistant designed to help users with job searching. You need to answer this question: \n\n${question} based on this text: ${newtext}. If you couldn't find answers from the given text, say there is no answer.`);
      for await (const chunk of stream) {
        setAnswer(chunk);
      }
    }
  }

  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
        event.preventDefault(); // Prevent form submission
        handleSendMessage();
    }
};

  if(!canShow) {
    return null
  }

  return (
    <div className="fixed bottom-12 right-12 p-4 rounded-md bg-muted-foreground z-50">
      
        <button onClick={() => setShow((prev) => !prev)} className="flex gap-2" >
          <MessageCircle />
          <p>Chat with Job</p>
        </button>

      {show && 
        <div className="fixed flex flex-col bottom-28 right-12 p-4 rounded-md bg-foreground min-h-64 w-96">
          <h3 className="text-background font-semibold border-b">Ask any question about {title}</h3>
          <div className="max-h-96 overflow-scroll">
            {answer && 
              <div className="text-background rounded-md bg-gray-200 p-4 mt-3 mb-3">
                <ReactMarkdown>{answer}</ReactMarkdown>
              </div>
            }
          </div>
          <Input className="mt-auto text-background" onChange={(e) => setQuestion(e.target.value)} onKeyDown={handleKeyDown} placeholder="What is the salary?" />
        </div>
      }
    </div>
  )
}

export default ChromeAI;