help.txt

"use client";
import React, { useContext } from "react";
import Link from "next/link";
import {
  CircleUserRound,
  Compass,
  Lightbulb,
  Youtube,
  Code,
  SendHorizontal,
  Brain,
} from "lucide-react";
import { Context } from "@/context/ContextProvider";
const SynthiaBody = () => {
  const {
    submit,
    recentPrompts,
    displayResult,
    loading,
    result,
    input,
    setInput,
  } = useContext(Context);
  console.log(loading, "loading");
  return (
    <div className="flex-1 min-h-[100vh] pb-[15vh] relative">
      <div className="flex items-center justify-between p-5 lg:px-96 text-xl text-gray-400">
        <h1 className="font-bold">Synthia AI</h1><p className="text-sm">developed by <Link href="https://xanmoy.me" className="text-indigo-600">
          Xanmoy
        </Link></p>
        {/* <CircleUserRound size={40} className="text-softTextColor" /> */}
        
      </div>
      <div className="max-w-[900px] m-auto">
        {!displayResult ? (
          <>
            <div className="my-12 text-5xl font-medium p-5">
              <p>
                <span className="font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-indigo-600">
                  Hello, I am Synthia

                </span>
              </p>
              
              <p>How can I help you today?</p>
            </div>
            {/* <div className="grid grid-cols-4 gap-5 p-5">
              <div className="h-48 p-4 bg-bgSecondaryColor rounded-xl relative cursor-pointer">
                <p>Suggest beautiful places to see on an upcoming road trip</p>
                <Compass
                  size={35}
                  className="p-1 absolute bottom-2 right-2 bg-bgPrimaryColor text-softTextColor rounded-full"
                />
              </div>
              <div className="h-48 p-4 bg-bgSecondaryColor rounded-xl relative cursor-pointer">
                <p>What’s the reaction to and impact of autonomous vehicles</p>
                <Lightbulb
                  size={35}
                  className="p-1 absolute bottom-2 right-2 bg-bgPrimaryColor text-softTextColor rounded-full"
                />
              </div>
              <div className="h-48 p-4 bg-bgSecondaryColor rounded-xl relative cursor-pointer">
                <p>Come up with a recipe for an upcoming event</p>
                <Youtube
                  size={35}
                  className="p-1 absolute bottom-2 right-2 bg-bgPrimaryColor text-softTextColor rounded-full"
                />
              </div>
              <div className="h-48 p-4 bg-bgSecondaryColor rounded-xl relative cursor-pointer">
                <p>Evaluate and rank common camera categories</p>
                <Code
                  size={35}
                  className="p-1 absolute bottom-2 right-2 bg-bgPrimaryColor text-softTextColor rounded-full"
                />
              </div>
            </div> */}
          </>
        ) : (
          <div className="result p-5">
              <div className="my-10 flex items-center gap-5 text-gray-400 rounded-2xl p-5 bg-bgSecondaryColor w-full">
                <CircleUserRound size={34} className="text-indigo-400" />
              <p>{recentPrompts}</p>
            </div>
              <div className="flex items-start gap-5 text-gray-50 rounded-2xl p-5 bg-indigo-600 w-full">
                
                <Brain size={34} className="text-white"/>
              <p
                  className="text-md font-normal loading-6 "
                dangerouslySetInnerHTML={{ __html: result }}
              ></p>
            </div>
          </div>
        )}
        <div className="absolute bottom-0 w-full max-w-[900px] px-5 m-auto">
          <form action={submit}>
            <div className="flex items-center justify-between gap-5 bg-bgSecondaryColor py-2.5 pr-5 pl-2 rounded-full">
              <input
                onChange={(e) => setInput(e.target.value)}
                value={input}
                type="text"
                className="flex-1 bg-transparent border-none outline-none p-2 text-md text-gray-400"
                placeholder="Enter a prompt here"
              />
              <div className="flex cursor-pointer ">
                <SendHorizontal type="submit" size={20} className="hover:bg-zinc-600 hover:text-zinc-900"/>
              </div>
            </div>
          </form>
          <p className="text-gray-400 text-sm text-center p-3">
            Synthia may display inaccurate info, including about people, so
            double-check its responses.
          </p>
        </div>
      </div>
    </div>
  );
};

export default SynthiaBody;


















**************************************************************













"use client"
import React, { useContext, useState } from "react";
import Link from "next/link";
import {
  CircleUserRound,
  Compass,
  Lightbulb,
  Youtube,
  Code,
  SendHorizontal,
  Brain,
} from "lucide-react";
import { Context } from "@/context/ContextProvider";

const SynthiaBody = () => {
  const {
    submit,
    recentPrompts,
    displayResult,
    loading,
    result,
    input,
    setInput,
  } = useContext(Context);
  const [isInputEmpty, setIsInputEmpty] = useState(true);

  // Function to handle input change
  const handleInputChange = (e) => {
    setInput(e.target.value);
    setIsInputEmpty(e.target.value.trim() === "");
  };

  // Function to handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!isInputEmpty) {
      submit(); // Call the submit function from context provider
    }
  };

  return (
    <div className="flex-1 min-h-[100vh] pb-[15vh] relative">
      <div className="flex items-center justify-between p-5 lg:px-96 text-xl text-gray-400">
        <h1 className="font-bold">Synthia AI</h1>
        <p className="text-sm">
          developed by{" "}
          <Link href="https://xanmoy.me" className="text-indigo-600">
            Xanmoy
          </Link>
        </p>
      </div>
      <div className="max-w-[900px] m-auto">
        {!displayResult ? (
          <>
            {/* Your initial content */}
          </>
        ) : (
          <div className="result p-5">
            {/* Your result content */}
          </div>
        )}
        <div className="absolute bottom-0 w-full max-w-[900px] px-5 m-auto">
          <form onSubmit={handleSubmit}>
            <div className="flex items-center justify-between gap-5 bg-bgSecondaryColor py-2.5 pr-5 pl-2 rounded-full">
              <input
                onChange={handleInputChange}
                value={input}
                type="text"
                className="flex-1 bg-transparent border-none outline-none p-2 text-md text-gray-400"
                placeholder="Enter a prompt here"
              />
              <div className={`flex cursor-pointer ${isInputEmpty ? 'pointer-events-none' : ''}`}>
                <button
                  type="submit"
                  className={`focus:outline-none ${isInputEmpty ? 'opacity-50 cursor-not-allowed' : ''}`}
                >
                  <SendHorizontal size={20} className="hover:bg-zinc-600 hover:text-zinc-900" />
                </button>
              </div>
            </div>
          </form>
          <p className="text-gray-400 text-sm text-center p-3">
            Synthia may display inaccurate info, including about people, so
            double-check its responses.
          </p>
        </div>
      </div>
    </div>
  );
};

export default SynthiaBody;