chat ui added

src/components/Chat/ChatBox.tsx

@@ -0,0 +1,170 @@
+import { TrashIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import React from "react";
+import { iconUrl } from "~/utils/icon";
+
+type Message = {
+  isBot: boolean;
+  message: string;
+};
+
+type History = {
+  bot_response: string;
+  human_message: string;
+};
+
+type Props = {
+  title: string | null;
+  id: string;
+  created_at: Date | null;
+  icon: string | null;
+  url: string | null;
+};
+
+export const CahtBox = (props: Props) => {
+  const [messages, setMessages] = React.useState<Message[]>([
+    {
+      isBot: true,
+      message: "Hi, I'm PageAssist Bot. How can I help you?",
+    },
+  ]);
+
+  const [history, setHistory] = React.useState<History[]>([]);
+  const divRef = React.useRef(null);
+
+  React.useEffect(() => {
+    //@ts-ignore
+    divRef.current.scrollIntoView({ behavior: "smooth" });
+  });
+
+  return (
+    <div className="flex flex-col border bg-white">
+      {/* header */}
+      <div className="bg-grey-lighter  flex flex-row items-center justify-between px-3 py-2">
+        <Link
+          target="_blank"
+          href={props.url ? props.url : "#"}
+          className="flex items-center"
+        >
+          <div>
+            <img
+              className="h-10 w-10 rounded-full"
+              //@ts-ignore
+              src={iconUrl(props?.icon, props?.url)}
+            />
+          </div>
+          <div className="ml-4">
+            <p className="text-grey-darkest">
+              {props?.title && props?.title?.length > 100
+                ? props?.title?.slice(0, 100) + "..."
+                : props?.title}
+            </p>
+            <p className="mt-1 text-xs text-gray-400">
+              {props.url && new URL(props.url).hostname}
+            </p>
+          </div>
+        </Link>
+
+        <div className="flex">
+          <button
+            type="button"
+            className="inline-flex items-center rounded-full border border-transparent bg-red-600 p-1.5 text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
+          >
+            <TrashIcon className="h-5 w-5" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+      {/*  */}
+      <div
+        style={{ height: "calc(100vh - 260px)" }}
+        className="flex-grow overflow-auto"
+      >
+        <div className="px-3 py-2">
+          {messages.map((message, index) => {
+            return (
+              <div
+                key={index}
+                className={
+                  message.isBot
+                    ? "mt-2 flex w-full max-w-xs space-x-3"
+                    : "ml-auto mt-2 flex w-full max-w-xs justify-end space-x-3"
+                }
+              >
+                <div>
+                  <div
+                    className={
+                      message.isBot
+                        ? "rounded-r-lg rounded-bl-lg bg-gray-300 p-3"
+                        : "rounded-l-lg rounded-br-lg bg-blue-600 p-3 text-white"
+                    }
+                  >
+                    <p className="text-sm">
+                      {/* <ReactMarkdown>{message.message}</ReactMarkdown> */}
+                      {message.message}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+          <div ref={divRef} />
+        </div>
+      </div>
+      <div className="items-center bg-gray-300 px-4  py-4">
+        <form
+        //   onSubmit={form.onSubmit(async (values) => {
+        //     setMessages([...messages, values])
+        //     form.reset()
+        //     await sendToBotAsync(values.message)
+        //   })}
+        >
+          <div className="flex-grow space-y-6">
+            <div className="flex">
+              <span className="mr-3">
+                <button
+                  //   disabled={isSending || isSaving}
+                  onClick={() => {
+                    setHistory([]);
+                    setMessages([
+                      {
+                        message: "Hi, I'm PageAssist. How can I help you?",
+                        isBot: true,
+                      },
+                    ]);
+                  }}
+                  className="inline-flex h-10 items-center rounded-md border border-gray-700 bg-white px-3 text-sm font-medium text-gray-700  hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+                  type="button"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    className="h-5 w-5 text-gray-600"
+                  >
+                    <path d="M18.37 2.63 14 7l-1.59-1.59a2 2 0 0 0-2.82 0L8 7l9 9 1.59-1.59a2 2 0 0 0 0-2.82L17 10l4.37-4.37a2.12 2.12 0 1 0-3-3Z"></path>
+                    <path d="M9 8c-2 3-4 3.5-7 4l8 10c2-1 6-5 6-7"></path>
+                    <path d="M14.5 17.5 4.5 15"></path>
+                  </svg>
+                </button>
+              </span>
+              <div className="flex-grow">
+                <input
+                  //   disabled={isSending || isSaving}
+                  className="flex h-10 w-full items-center rounded px-3 text-sm"
+                  type="text"
+                  required
+                  placeholder="Type your message…"
+                  //   {...form.getInputProps("message")}
+                />
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};