chatbot-ui starter

components/Chat/Chat.tsx

@@ -0,0 +1,36 @@
+import { Message } from "@/types";
+import { FC } from "react";
+import { ChatInput } from "./ChatInput";
+import { ChatLoader } from "./ChatLoader";
+import { ChatMessage } from "./ChatMessage";
+
+interface Props {
+  messages: Message[];
+  loading: boolean;
+  onSend: (message: Message) => void;
+}
+
+export const Chat: FC<Props> = ({ messages, loading, onSend }) => {
+  return (
+    <div className="flex flex-col rounded-lg px-2 sm:p-4 sm:border border-neutral-300">
+      {messages.map((message, index) => (
+        <div
+          key={index}
+          className="my-1 sm:my-1.5"
+        >
+          <ChatMessage message={message} />
+        </div>
+      ))}
+
+      {loading && (
+        <div className="my-1 sm:my-1.5">
+          <ChatLoader />
+        </div>
+      )}
+
+      <div className="mt-4 sm:mt-8 bottom-[56px] left-0 w-full">
+        <ChatInput onSend={onSend} />
+      </div>
+    </div>
+  );
+};

components/Chat/ChatInput.tsx

@@ -0,0 +1,65 @@
+import { Message } from "@/types";
+import { IconArrowUp } from "@tabler/icons-react";
+import { FC, KeyboardEvent, useEffect, useRef, useState } from "react";
+
+interface Props {
+  onSend: (message: Message) => void;
+}
+
+export const ChatInput: FC<Props> = ({ onSend }) => {
+  const [content, setContent] = useState<string>();
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    if (value.length > 4000) {
+      alert("Message limit is 4000 characters");
+      return;
+    }
+
+    setContent(value);
+  };
+
+  const handleSend = () => {
+    if (!content) {
+      alert("Please enter a message");
+      return;
+    }
+    onSend({ role: "user", content });
+    setContent("");
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  useEffect(() => {
+    if (textareaRef && textareaRef.current) {
+      textareaRef.current.style.height = "inherit";
+      textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
+    }
+  }, [content]);
+
+  return (
+    <div className="relative">
+      <textarea
+        ref={textareaRef}
+        className="min-h-[44px] rounded-lg pl-4 pr-12 py-2 w-full focus:outline-none focus:ring-1 focus:ring-neutral-300 border-2 border-neutral-200"
+        style={{ resize: "none" }}
+        placeholder="Type a message..."
+        value={content}
+        rows={1}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+      />
+
+      <button onClick={() => handleSend()}>
+        <IconArrowUp className="absolute right-2 bottom-3 h-8 w-8 hover:cursor-pointer rounded-full p-1 bg-blue-500 text-white hover:opacity-80" />
+      </button>
+    </div>
+  );
+};

components/Chat/ChatLoader.tsx

@@ -0,0 +1,17 @@
+import { IconDots } from "@tabler/icons-react";
+import { FC } from "react";
+
+interface Props {}
+
+export const ChatLoader: FC<Props> = () => {
+  return (
+    <div className="flex flex-col flex-start">
+      <div
+        className={`flex items-center bg-neutral-200 text-neutral-900 rounded-2xl px-4 py-2 w-fit`}
+        style={{ overflowWrap: "anywhere" }}
+      >
+        <IconDots className="animate-pulse" />
+      </div>
+    </div>
+  );
+};

components/Chat/ChatMessage.tsx

@@ -0,0 +1,19 @@
+import { Message } from "@/types";
+import { FC } from "react";
+
+interface Props {
+  message: Message;
+}
+
+export const ChatMessage: FC<Props> = ({ message }) => {
+  return (
+    <div className={`flex flex-col ${message.role === "assistant" ? "items-start" : "items-end"}`}>
+      <div
+        className={`flex items-center ${message.role === "assistant" ? "bg-neutral-200 text-neutral-900" : "bg-blue-500 text-white"} rounded-2xl px-3 py-2 max-w-[67%] whitespace-pre-wrap`}
+        style={{ overflowWrap: "anywhere" }}
+      >
+        {message.content}
+      </div>
+    </div>
+  );
+};

components/Layout/Footer.tsx

@@ -0,0 +1,5 @@
+import { FC } from "react";
+
+export const Footer: FC = () => {
+  return <div className="flex h-[30px] sm:h-[50px] border-t border-neutral-300 py-2 px-8 items-center sm:justify-between justify-center"></div>;
+};

components/Layout/Navbar.tsx

@@ -0,0 +1,16 @@
+import { FC } from "react";
+
+export const Navbar: FC = () => {
+  return (
+    <div className="flex h-[50px] sm:h-[60px] border-b border-neutral-300 py-2 px-2 sm:px-8 items-center justify-between">
+      <div className="font-bold text-3xl flex items-center">
+        <a
+          className="ml-2 hover:opacity-50"
+          href="https://code-scaffold.vercel.app"
+        >
+          Chatbot UI
+        </a>
+      </div>
+    </div>
+  );
+};