handle arrow up/down in textarea

This commit is contained in:
Andrei Canta 2023-03-21 23:08:31 +02:00
parent d0f7c5bb72
commit 8883586b2a
3 changed files with 33 additions and 0 deletions

13
package-lock.json generated
View file

@ -36,6 +36,7 @@
"devDependencies": {
"@parcel/transformer-sass": "^2.8.3",
"@types/downloadjs": "^1.4.3",
"@types/lodash": "^4.14.191",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"buffer": "^5.7.1",
@ -2404,6 +2405,12 @@
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
},
"node_modules/@types/lodash": {
"version": "4.14.191",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
"dev": true
},
"node_modules/@types/mdast": {
"version": "3.0.11",
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.11.tgz",
@ -9635,6 +9642,12 @@
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
},
"@types/lodash": {
"version": "4.14.191",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
"dev": true
},
"@types/mdast": {
"version": "3.0.11",
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.11.tgz",

View file

@ -10,6 +10,7 @@
"devDependencies": {
"@parcel/transformer-sass": "^2.8.3",
"@types/downloadjs": "^1.4.3",
"@types/lodash": "^4.14.191",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"buffer": "^5.7.1",

View file

@ -13,6 +13,7 @@ import {
} from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useLiveQuery } from "dexie-react-hooks";
import { findLast } from "lodash";
import { nanoid } from "nanoid";
import { useState } from "react";
import { AiOutlineSend } from "react-icons/ai";
@ -285,6 +286,24 @@ export function ChatRoute() {
event.preventDefault();
submit();
}
if (event.code === "ArrowUp") {
event.preventDefault();
const nextUserMessage = findLast(
messages,
(message) => message.role === "user"
);
setContent(nextUserMessage?.content ?? "");
}
if (event.code === "ArrowDown") {
event.preventDefault();
const lastUserMessage = findLast(
messages,
(message) => message.role === "user"
);
if (lastUserMessage?.content === content) {
setContent("");
}
}
}}
/>
<MediaQuery largerThan="sm" styles={{ display: "none" }}>