mirror of
https://github.com/aljazceru/AgentGPT.git
synced 2025-12-17 05:54:20 +01:00
♻️ Refactor input
This commit is contained in:
25
package-lock.json
generated
25
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user