♻️ Refactor input

This commit is contained in:
adam.watkins
2023-04-08 16:26:04 +03:00
parent 840d54ff75
commit de8e5bef24
4 changed files with 29 additions and 27 deletions

25
package-lock.json generated
View File

@@ -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",

View File

@@ -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",

View File

@@ -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
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>
<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 className="flex gap-1 rounded-t-3xl p-3">
<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-green-500" />
</div>
);
};

View File

@@ -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={
"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]" +
(disabled ? " cursor-not-allowed hover:border-white/10" : "")
}
className={clsx(
"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",
left && "rounded-l-none"
)}
placeholder={placeholder}
type="text"
value={value}