singlexyz/ChatGPT-Next-Web
1
0
Fork 0
forked from XiaoMo/ChatGPT-Next-Web
Code Pull Requests Activity

fix: #439 context prompt input with textarea

Browse Source
This commit is contained in:
Yidadaa 2023-04-06 02:05:44 +08:00
parent 7da0cc6551
commit 0e77177a60
3 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/components/chat.tsx
View File

@ -32,11 +32,14 @@ import { IconButton } from "./button";
import styles from "./home.module.scss"; import styles from "./home.module.scss";
import chatStyle from "./chat.module.scss"; import chatStyle from "./chat.module.scss";
import { Modal, showModal, showToast } from "./ui-lib"; import { Input, Modal, showModal, showToast } from "./ui-lib";
const Markdown = dynamic(async () => memo((await import("./markdown")).Markdown), { const Markdown = dynamic(
loading: () => <LoadingIcon />, async () => memo((await import("./markdown")).Markdown),
}); {
loading: () => <LoadingIcon />,
},
);
const Emoji = dynamic(async () => (await import("emoji-picker-react")).Emoji, { const Emoji = dynamic(async () => (await import("emoji-picker-react")).Emoji, {
loading: () => <LoadingIcon />, loading: () => <LoadingIcon />,
@ -151,7 +154,6 @@ function PromptToast(props: {
]} ]}
> >
<> <>
{" "}
<div className={chatStyle["context-prompt"]}> <div className={chatStyle["context-prompt"]}>
{context.map((c, i) => ( {context.map((c, i) => (
<div className={chatStyle["context-prompt-row"]} key={i}> <div className={chatStyle["context-prompt-row"]} key={i}>
@ -171,17 +173,18 @@ function PromptToast(props: {
</option> </option>
))} ))}
</select> </select>
<input <Input
value={c.content} value={c.content}
type="text" type="text"
className={chatStyle["context-content"]} className={chatStyle["context-content"]}
onChange={(e) => rows={1}
onInput={(e) =>
updateContextPrompt(i, { updateContextPrompt(i, {
...c, ...c,
content: e.target.value as any, content: e.currentTarget.value as any,
}) })
} }
></input> />
<IconButton <IconButton
icon={<DeleteIcon />} icon={<DeleteIcon />}
className={chatStyle["context-delete-button"]} className={chatStyle["context-delete-button"]}

10
app/components/ui-lib.module.scss
View File

@ -141,6 +141,16 @@
} }
} }
.input {
border: var(--border-in-light);
border-radius: 10px;
padding: 10px;
font-family: inherit;
background-color: var(--white);
color: var(--black);
resize: none;
}
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.modal-container { .modal-container {
width: 90vw; width: 90vw;

15
app/components/ui-lib.tsx
View File

@ -2,6 +2,7 @@ import styles from "./ui-lib.module.scss";
import LoadingIcon from "../icons/three-dots.svg"; import LoadingIcon from "../icons/three-dots.svg";
import CloseIcon from "../icons/close.svg"; import CloseIcon from "../icons/close.svg";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import React from "react";
export function Popover(props: { export function Popover(props: {
children: JSX.Element; children: JSX.Element;
@ -140,3 +141,17 @@ export function showToast(content: string, delay = 3000) {
root.render(<Toast content={content} />); root.render(<Toast content={content} />);
} }
export type InputProps = React.HTMLProps<HTMLTextAreaElement> & {
autoHeight?: boolean;
rows?: number;
};
export function Input(props: InputProps) {
return (
<textarea
{...props}
className={`${styles["input"]} ${props.className}`}
></textarea>
);
}