♻️ Refactor input

package-lock.json

@@ -20,7 +20,7 @@
         "@trpc/server": "^10.9.0",
         "@uiball/loaders": "^1.2.6",
         "axios": "^1.3.5",
-        "classnames": "^2.3.2",
+        "clsx": "^1.2.1",
         "framer-motion": "^10.11.2",
         "langchain": "^0.0.49",
         "next": "13.1.6",
@@ -1496,16 +1496,19 @@
         "node": ">= 6"
       }
     },
-    "node_modules/classnames": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
-    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -6362,16 +6365,16 @@
         }
       }
     },
-    "classnames": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
-    },
     "client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",

package.json

@@ -21,7 +21,7 @@
     "@trpc/server": "^10.9.0",
     "@uiball/loaders": "^1.2.6",
     "axios": "^1.3.5",
-    "classnames": "^2.3.2",
+    "clsx": "^1.2.1",
     "framer-motion": "^10.11.2",
     "langchain": "^0.0.49",
     "next": "13.1.6",

src/components/ChatWindow.tsx

@@ -1,4 +1,3 @@
-import cx from "classnames";
 import type { ReactNode } from "react";
 import React, { useEffect, useRef } from "react";
 import { FaBrain, FaListAlt, FaPlayCircle, FaStar } from "react-icons/fa";
@@ -33,7 +32,7 @@ const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
     >
       <MacWindowHeader />
       <div
-        className="mb-3 mr-3 overflow-y-auto sm:h-[10em] 2xl:h-[20em]"
+        className="mb-3 mr-3 h-[10em] overflow-y-auto 2xl:h-[20em] "
         ref={scrollRef}
       >
         {messages.map((message, index) => (
@@ -49,12 +48,10 @@ const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
 
 const MacWindowHeader = () => {
   return (
-    <div
+    <div className="flex gap-1 rounded-t-3xl p-3">
-      className={cx("flex gap-1 rounded-t-3xl p-3", "flex gap-1 rounded-t-3xl")}
+      <div className="h-3 w-3 rounded-full bg-red-500" />
-    >
+      <div className="h-3 w-3 rounded-full bg-yellow-500" />
-      <div className="h-3 w-3 rounded-full bg-red-500"></div>
+      <div className="h-3 w-3 rounded-full bg-green-500" />
-      <div className="h-3 w-3 rounded-full bg-yellow-500"></div>
-      <div className="h-3 w-3 rounded-full bg-green-500"></div>
     </div>
   );
 };

src/components/Input.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+import clsx from "clsx";
 
 interface InputProps {
-  left: React.ReactNode;
+  left?: React.ReactNode;
   value: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   placeholder?: string;
@@ -17,16 +18,17 @@ const Input = ({
 }: InputProps) => {
   return (
     <div className="flex w-full items-center rounded-xl bg-[#3a3a3a] font-mono text-lg text-white/75 shadow-2xl">
-      {left != null ? (
+      {left && (
         <div className="center flex items-center rounded-xl rounded-r-none border-[2px] border-r-0 border-white/10 px-5 py-3 text-lg font-semibold tracking-wider transition-all">
           {left}
         </div>
-      ) : null}
+      )}
       <input
-        className={
+        className={clsx(
-          "border:black delay-50 w-full rounded-xl rounded-l-none border-[2px] border-white/10 bg-transparent px-2 py-3 tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/25 focus:border-[#1E88E5]" +
+          "border:black delay-50 w-full rounded-xl border-[2px] border-white/10 bg-transparent px-2 py-3 tracking-wider outline-0 transition-all placeholder:text-white/20 hover:border-[#1E88E5]/25 focus:border-[#1E88E5]",
-          (disabled ? " cursor-not-allowed hover:border-white/10" : "")
+          disabled && " cursor-not-allowed hover:border-white/10",
-        }
+          left && "rounded-l-none"
+        )}
         placeholder={placeholder}
         type="text"
         value={value}