boom

components/Chat/Chat.tsx

@@ -1,34 +1,59 @@
-import { Message } from "@/types";
-import { FC } from "react";
+import { Message, OpenAIModel, OpenAIModelNames } from "@/types";
+import { FC, useEffect, useRef } from "react";
+import { ModelSelect } from "../ModelSelect";
 import { ChatInput } from "./ChatInput";
 import { ChatLoader } from "./ChatLoader";
 import { ChatMessage } from "./ChatMessage";
 
 interface Props {
+  model: OpenAIModel;
   messages: Message[];
   loading: boolean;
   onSend: (message: Message) => void;
+  onSelect: (model: OpenAIModel) => 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>
-      ))}
+export const Chat: FC<Props> = ({ model, messages, loading, onSend, onSelect }) => {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
 
-      {loading && (
-        <div className="my-1 sm:my-1.5">
-          <ChatLoader />
-        </div>
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  return (
+    <div className="h-full flex flex-col">
+      {messages.length === 0 ? (
+        <>
+          <div className="flex justify-center pt-8">
+            <ModelSelect
+              model={model}
+              onSelect={onSelect}
+            />
+          </div>
+
+          <div className="flex-1 text-4xl text-center text-neutral-300 pt-[280px]">Chatbot UI Pro</div>
+        </>
+      ) : (
+        <>
+          <div className="flex-1 overflow-auto">
+            <div className="text-center py-3 dark:bg-[#434654] dark:text-neutral-300 text-neutral-500 text-sm border border-b-neutral-300 dark:border-none">Model: {OpenAIModelNames[model]}</div>
+
+            {messages.map((message, index) => (
+              <div key={index}>
+                <ChatMessage message={message} />
+              </div>
+            ))}
+            {loading && <ChatLoader />}
+            <div ref={messagesEndRef} />
+          </div>
+        </>
       )}
 
-      <div className="mt-4 sm:mt-8 bottom-[56px] left-0 w-full">
+      <div className="h-[140px] w-[800px] mx-auto">
         <ChatInput onSend={onSend} />
       </div>
     </div>

components/Chat/ChatInput.tsx

@@ -1,5 +1,5 @@
 import { Message } from "@/types";
-import { IconArrowUp } from "@tabler/icons-react";
+import { IconSend } from "@tabler/icons-react";
 import { FC, KeyboardEvent, useEffect, useRef, useState } from "react";
 
 interface Props {
@@ -46,20 +46,24 @@ export const ChatInput: FC<Props> = ({ onSend }) => {
 
   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 className="absolute bottom-[-120px] w-full">
+        <textarea
+          ref={textareaRef}
+          className="rounded-lg pl-4 pr-8 py-3 w-full focus:outline-none max-h-[280px] dark:bg-[#40414F] dark:border-opacity-50 dark:border-neutral-800 dark:text-neutral-100 border border-neutral-300 shadow text-neutral-900"
+          style={{ resize: "none", bottom: `${textareaRef?.current?.scrollHeight}px` }}
+          placeholder="Type a message..."
+          value={content}
+          rows={1}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+        />
+        <button
+          className="absolute right-2 bottom-[14px] text-neutral-400 p-2 hover:dark:bg-neutral-800 hover:bg-neutral-400 hover:text-white rounded-md"
+          onClick={handleSend}
+        >
+          <IconSend size={18} />
+        </button>
+      </div>
     </div>
   );
 };

components/Chat/ChatLoader.tsx

@@ -5,11 +5,12 @@ 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" }}
-      >
+    <div
+      className={`flex justify-center px-[120px] py-[30px] whitespace-pre-wrap dark:bg-[#434654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 dark:border-none"`}
+      style={{ overflowWrap: "anywhere" }}
+    >
+      <div className="w-[650px] flex">
+        <div className="mr-4 font-bold min-w-[30px]">AI:</div>
         <IconDots className="animate-pulse" />
       </div>
     </div>

components/Chat/ChatMessage.tsx

@@ -7,12 +7,14 @@ interface Props {
 
 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
+      className={`flex justify-center px-[120px] py-[30px] whitespace-pre-wrap] ${message.role === "assistant" ? "dark:bg-[#434654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 border border-neutral-300 dark:border-none" : "dark:bg-[#343541] dark:text-white text-neutral-900"}`}
+      style={{ overflowWrap: "anywhere" }}
+    >
+      <div className="w-[650px] flex">
+        <div className="mr-4 font-bold min-w-[40px]">{message.role === "assistant" ? "AI:" : "You:"}</div>
+
+        <div className="whitespace-pre-wrap">{message.content}</div>
       </div>
     </div>
   );

components/ModelSelect.tsx

@@ -0,0 +1,30 @@
+import { OpenAIModel, OpenAIModelNames } from "@/types";
+import { FC } from "react";
+
+interface Props {
+  model: OpenAIModel;
+  onSelect: (model: OpenAIModel) => void;
+}
+
+export const ModelSelect: FC<Props> = ({ model, onSelect }) => {
+  return (
+    <div className="flex flex-col">
+      <label className="text-left mb-2 dark:text-neutral-400 text-neutral-700">Model</label>
+      <select
+        className="w-[300px] p-3 dark:text-white dark:bg-[#343541] border border-neutral-500 rounded-lg appearance-none focus:shadow-outline text-neutral-900"
+        placeholder="Select a model"
+        value={model}
+        onChange={(e) => onSelect(e.target.value as OpenAIModel)}
+      >
+        {Object.entries(OpenAIModelNames).map(([value, name]) => (
+          <option
+            key={value}
+            value={value}
+          >
+            {name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};

components/Sidebar/Sidebar.tsx

@@ -0,0 +1,31 @@
+import { IconPlus } from "@tabler/icons-react";
+import { FC } from "react";
+import { SidebarSettings } from "./SidebarSettings";
+
+interface Props {
+  lightMode: "light" | "dark";
+  onToggleLightMode: (mode: "light" | "dark") => void;
+}
+
+export const Sidebar: FC<Props> = ({ lightMode, onToggleLightMode }) => {
+  return (
+    <div className="flex flex-col bg-[#202123] min-w-[260px]">
+      <div className="flex items-center justify-center h-[60px]">
+        <button className="flex items-center w-[240px] h-[40px] rounded-lg bg-[#202123] border border-neutral-600 text-sm hover:bg-neutral-700">
+          <IconPlus
+            className="ml-4 mr-3"
+            size={16}
+          />
+          New chat
+        </button>
+      </div>
+
+      <div className="flex-1"></div>
+
+      <SidebarSettings
+        lightMode={lightMode}
+        onToggleLightMode={onToggleLightMode}
+      />
+    </div>
+  );
+};

components/Sidebar/SidebarButton.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react";
+
+interface Props {
+  text: string;
+  icon: JSX.Element;
+  onClick: () => void;
+}
+
+export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => {
+  return (
+    <div
+      className="flex hover:bg-[#343541] py-2 px-4 rounded-md cursor-pointer w-[200px] items-center"
+      onClick={onClick}
+    >
+      <div className="mr-3">{icon}</div>
+      <div>{text}</div>
+    </div>
+  );
+};

components/Sidebar/SidebarSettings.tsx

@@ -0,0 +1,20 @@
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import { FC } from "react";
+import { SidebarButton } from "./SidebarButton";
+
+interface Props {
+  lightMode: "light" | "dark";
+  onToggleLightMode: (mode: "light" | "dark") => void;
+}
+
+export const SidebarSettings: FC<Props> = ({ lightMode, onToggleLightMode }) => {
+  return (
+    <div className="flex flex-col items-center border-t border-neutral-500 py-4">
+      <SidebarButton
+        text={lightMode === "light" ? "Dark mode" : "Light mode"}
+        icon={lightMode === "light" ? <IconMoon /> : <IconSun />}
+        onClick={() => onToggleLightMode(lightMode === "light" ? "dark" : "light")}
+      />
+    </div>
+  );
+};