Fix prompt scroll

package.json

@@ -1,7 +1,7 @@
 {
   "name": "talk-vite",
   "private": true,
-  "version": "2.1.0",
+  "version": "2.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/home/chat-window/attached/attached-preview.tsx

@@ -9,7 +9,6 @@ import {findPrompt, Prompt, promptState} from "../../../state/promt-state.ts";
 import {AttachedItem} from "./attached-item.tsx";
 import {cx} from "../../../util/util.tsx";
 import {PromptEditor} from "../prompt/prompt-editor.tsx";
-import {subscribe} from "valtio";
 import {CloseIcon} from "../compnent/widget/icon.tsx";
 
 type HPProps = {
@@ -71,15 +70,6 @@ export const AttachedPreview: React.FC<HPProps> = ({chatProxy}) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isPAPinning]);
 
-    useEffect(() => {
-        const scroll = () => {
-            if (scrollRef.current) {
-                scrollRef.current.scrollTop += layoutState.PAButtonWheelDeltaY
-            }
-        }
-        scroll()
-        return subscribe(layoutState, scroll)
-    }, []);
     return (
         <div
             className={cx("flex flex-col w-full pb-2",
@@ -152,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}
         />

src/home/chat-window/chat-window.tsx

@@ -1,21 +1,19 @@
 import {appState, Chat, currentChatProxy} from "../../state/app-state.ts"
 import TextArea from "./text-area.tsx"
 import Recorder from "./recorder.tsx"
-import React, {useEffect, useRef, useState} from "react"
+import React, {useEffect, useState} from "react"
 import {subscribeKey} from "valtio/utils"
 import {MessageList} from "./message-list/message-list.tsx"
 import {PromptAttached} from "./prompt-attached.tsx"
 import {cx} from "../../util/util.tsx"
 import {useSnapshot} from "valtio/react"
 import {layoutState} from "../../state/layout-state.ts"
-import {throttle} from "lodash"
 
 
 export const ChatWindow: React.FC = () => {
 
     const [chatProxy, setChatProxy] = useState<Chat | undefined>(undefined)
     // console.info("ChatWindow rendered", new Date().toLocaleString())
-    const buttonRef = useRef<HTMLDivElement>(null)
 
     const {isPAPinning} = useSnapshot(layoutState)
     const {showRecorder} = useSnapshot(appState.pref)
@@ -31,17 +29,8 @@ export const ChatWindow: React.FC = () => {
     }, [])
 
 
-    const handleMouseMove = throttle((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-        if (buttonRef.current) {
-            const rect = buttonRef.current.getBoundingClientRect()
-            const [x, y] = [(rect.left + 18), (rect.top + 18)]
-            layoutState.PAButtonDistance = Math.hypot(x - event.clientX, y - event.clientY)
-        }
-    }, 50)
-
     return (
         <div
-            onMouseMove={handleMouseMove}
             className={cx("relative flex flex-col max-w-4xl rounded-xl w-full h-full items-center",
                 "transition-all duration-200",
                 isPAPinning ? "bg-opacity-0" : "bg-opacity-40 backdrop-blur bg-neutral-200"
@@ -58,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 ref={buttonRef}
-                                 className="flex justify-between w-full px-2 py-1 backdrop-blur cursor-pointer">
-                                <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">
@@ -86,7 +75,7 @@ export const ChatWindow: React.FC = () => {
                                         : <div className="h-2"></div>
                                 }
                             </div>
-                        </>
+                        </div>
                     </div>
                 </>
             }

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 (

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>

src/state/layout-state.ts

@@ -6,15 +6,11 @@ export type Layout = {
     isMessageListOverflow: boolean
     isMessageListAtBottom: boolean
     isPAPinning: boolean
-    PAButtonDistance: number
-    PAButtonWheelDeltaY: number
 }
 
 export const layoutState = proxy<Layout>({
     settingPanelScrollOffset: 0,
     isMessageListOverflow: false,
     isMessageListAtBottom: false,
     isPAPinning: false,
-    PAButtonDistance: 1000,
-    PAButtonWheelDeltaY:0,
 })

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)