fix: prompt list should scroll to top after creating a new prompt

proxoar · Mar 26, 2024 · 9408ee5 · 9408ee5
1 parent 0566645
commit 9408ee5
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 29 deletions.
diff --git a/src/home/chat-window/attached/attached-preview.tsx b/src/home/chat-window/attached/attached-preview.tsx
@@ -142,7 +142,7 @@ const PromptEditorTitle: React.FC<Props> = ({promptProxy}) => {
         <input name="prompt name"
                style={{width: `${name.length + 1}ch`}}
                className={cx("whitespace-nowrap outline-none bg-neutral-100/[0.5] rounded-xl",
-                   "text-neutral-800 text-lg m-auto pl-3")}
+                   "text-neutral-800 text-lg m-auto text-center")}
                value={name}
                onChange={e => promptProxy.name = e.target.value}
         />

diff --git a/src/home/chat-window/chat-window.tsx b/src/home/chat-window/chat-window.tsx
@@ -47,22 +47,22 @@ export const ChatWindow: React.FC = () => {
                     </div>
 
                     <div
-                        className="flex flex-col items-center w-full h-full justify-between pb-2">
-                        <>
-                            <div className={cx("flex justify-between w-full px-2 py-1 rounded-t-xl rounded-b-md",
-                                "cursor-pointer bg-neutral-200/[0.5]")}>
-                                <span className="icon-[f7--sidebar-left] w-5 h-5"
+                        className="flex flex-col items-center w-full h-full pb-2 justify-start">
+                        <div className={cx("flex justify-between w-full px-2 py-1 rounded-t-xl rounded-b-md",
+                            "bg-neutral-200/[0.5] select-none")}>
+                                <span className="icon-[f7--sidebar-left] w-5 h-5 cursor-pointer"
                                       onClick={() => appState.pref.showSidebar = !appState.pref.showSidebar}
                                 ></span>
-                                <p>{chatProxy?.name}</p>
-                                <div
-                                    className="flex justify-center items-center bg-neutral-500 rounded-full w-5 h-5 cursor-pointer"
-                                    onClick={() => layoutState.isPAPinning = true}
-                                >
-                                    <p className="text-sm text-neutral-100">P</p>
-                                </div>
+                            <p>{chatProxy?.name}</p>
+                            <div
+                                className="flex justify-center items-center bg-neutral-500 rounded-full w-5 h-5 cursor-pointer"
+                                onClick={() => layoutState.isPAPinning = true}
+                            >
+                                <p className="text-sm text-neutral-100">P</p>
                             </div>
-                            <MessageList chatProxy={chatProxy} key={chatProxy.id}/>
+                        </div>
+                        <MessageList chatProxy={chatProxy} key={chatProxy.id}/>
+                        <div className="w-full mt-auto">
                             <div
                                 className="bottom-0 flex w-full flex-col items-center gap-2 rounded-xl px-2
                                 md:px-4 lg:px-6 pt-1">
@@ -75,7 +75,7 @@ export const ChatWindow: React.FC = () => {
                                         : <div className="h-2"></div>
                                 }
                             </div>
-                        </>
+                        </div>
                     </div>
                 </>
             }

diff --git a/src/home/chat-window/prompt/prompt-editor-item.tsx b/src/home/chat-window/prompt/prompt-editor-item.tsx
@@ -26,7 +26,7 @@ export const PromptEditorItem: React.FC<Props> = ({promptProxy, messageProxy, in
         e.preventDefault()
         const newIndex = e.shiftKey || e.altKey || e.ctrlKey || e.metaKey ? index : index + 1
         // eslint-disable-next-line valtio/state-snapshot-rule
-        promptProxy.messages.splice(newIndex, 0, {role: "user", content: ""})
+        promptProxy.messages.splice(newIndex, 0, {role: "system", content: ""})
     }, [index, promptProxy.messages]);
 
     return (

diff --git a/src/home/chat-window/prompt/prompt-list.tsx b/src/home/chat-window/prompt/prompt-list.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from "react"
+import React, {useCallback, useEffect, useRef, useState} from "react"
 import {Chat} from "../../../state/app-state.ts"
 import {useSnapshot} from "valtio/react"
 import {newPrompt, Prompt, promptState} from "../../../state/promt-state.ts"
@@ -45,6 +45,15 @@ export const PromptList: React.FC<Props> = ({chatProxy}) => {
         setFilteredPrompts(ps)
     }, [searchText, prompts, setFilteredPrompts])
 
+    const scrollToTop = useCallback(() => {
+        const ref = containerRef.current
+        ref?.scrollTo({
+            left: 0,
+            top: 0,
+            behavior: 'instant'
+        })
+    }, []);
+
     // scroll to selected item
     useEffect(() => {
         if (isPAPinning && !isSearching && containerRef.current) {
@@ -64,16 +73,8 @@ export const PromptList: React.FC<Props> = ({chatProxy}) => {
                 }
             })
         }
-        return () => {
-            const ref = containerRef.current
-            ref?.scrollTo({
-                left: 0,
-                top: 0,
-                behavior: 'instant'
-            })
-
-        }
-    }, [isSearching, isPAPinning,selectedRef,containerRef])
+        return scrollToTop
+    }, [isSearching, isPAPinning, selectedRef, containerRef, scrollToTop])
 
     return (
         <div className="flex h-full flex-col gap-2 min-w-[18rem] max-w-[18rem] p4-2">
@@ -130,7 +131,10 @@ export const PromptList: React.FC<Props> = ({chatProxy}) => {
                     <div
                         className="flex justify-center items-center rounded-xl stroke-white text-neutral-500
                  bg-white bg-opacity-80 backdrop-blur cursor-pointer "
-                        onClick={newPrompt}
+                        onClick={() => {
+                            newPrompt()
+                            scrollToTop()
+                        }}
                     >
                         <PiPlusLight size={24} className="stroke-2"/>
                     </div>

diff --git a/src/state/promt-state.ts b/src/state/promt-state.ts
@@ -62,7 +62,7 @@ export const newPrompt = (): string => {
     const newP: Prompt = {
         id: randomHash16Char(),
         name: "New Prompt",
-        messages: [{role: "user", content: ""}],
+        messages: [{role: "system", content: ""}],
         preset: false
     }
     promptState.prompts.unshift(newP)