iod/page-assist
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add typing state to PlaygroundForm component

Browse Source
This commit is contained in:
n4ze3m 2024-03-04 23:09:09 +05:30
parent 21ab18dd7d
commit faea2b2fa2
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "pageassist", "name": "pageassist",
"displayName": "Page Assist - A Web UI for Local AI Models", "displayName": "Page Assist - A Web UI for Local AI Models",
"version": "1.0.5", "version": "1.0.6",
"description": "Use your locally running AI models to assist you in your web browsing.", "description": "Use your locally running AI models to assist you in your web browsing.",
"author": "n4ze3m", "author": "n4ze3m",
"scripts": { "scripts": {

11
src/components/Option/Playground/PlaygroundForm.tsx
View File

@ -18,6 +18,7 @@ type Props = {
export const PlaygroundForm = ({ dropedFile }: Props) => { export const PlaygroundForm = ({ dropedFile }: Props) => {
const inputRef = React.useRef<HTMLInputElement>(null) const inputRef = React.useRef<HTMLInputElement>(null)
const [typing, setTyping] = React.useState<boolean>(false)
const { const {
onSubmit, onSubmit,
selectedModel, selectedModel,
@ -115,14 +116,14 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
} }
}) })
const handleKeyDown = (e: KeyboardEvent) => { const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "Process" || e.key === "229" ) return if (e.key === "Process" || e.key === "229" ) return
if ( if (
!typing &&
e.key === "Enter" && e.key === "Enter" &&
!e.shiftKey && !e.shiftKey &&
!isSending && !isSending &&
sendWhenEnter && sendWhenEnter
!e.isComposing
) { ) {
e.preventDefault() e.preventDefault()
form.onSubmit(async (value) => { form.onSubmit(async (value) => {
@ -213,7 +214,9 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
/> />
<div className="w-full border-x border-t flex flex-col dark:border-gray-600 rounded-t-xl p-2"> <div className="w-full border-x border-t flex flex-col dark:border-gray-600 rounded-t-xl p-2">
<textarea <textarea
onKeyDown={(e) => handleKeyDown(e as unknown as KeyboardEvent)} onCompositionStart={() => setTyping(true)}
onCompositionEnd={() => setTyping(false)}
onKeyDown={(e) => handleKeyDown(e)}
ref={textareaRef} ref={textareaRef}
className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100" className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
required required