Implement a scroll_reset_key prop in Main and MainView to ensure the main panel content scrolls to the top when switching between Home and Main views

Author: robertpiosik

packages/vscode/src/views/panel/frontend/Main/Main.tsx

@@ -18,6 +18,7 @@ import { post_message } from '../utils/post_message'
 import { Configurations as UiConfigurations } from '@ui/components/editor/panel/Configurations'
 
 type Props = {
+  scroll_reset_key: number
   response_history: {
     response: string
     raw_instructions?: string
@@ -628,6 +629,7 @@ export const Main: React.FC<Props> = (props) => {
 
   return (
     <MainView
+      scroll_reset_key={props.scroll_reset_key}
       on_show_home={props.on_show_home}
       initialize_chats={handle_initialize_chats}
       copy_to_clipboard={handle_copy_to_clipboard}

packages/vscode/src/views/panel/frontend/Main/MainView/MainView.tsx

@@ -28,6 +28,7 @@ import { IconButton as UiIconButton } from '@ui/components/editor/panel/IconButt
 dayjs.extend(relativeTime)
 
 type Props = {
+  scroll_reset_key: number
   initialize_chats: (params: {
     preset_name?: string
     group_name?: string
@@ -261,7 +262,9 @@ export const MainView: React.FC<Props> = (props) => {
     </>
   )
 
-  const scroll_to_top_key = `${props.home_view_type}-${
+  const scroll_to_top_key = `${props.scroll_reset_key}-${
+    props.home_view_type
+  }-${
     props.home_view_type == HOME_VIEW_TYPES.WEB
       ? props.web_mode
       : props.api_mode

packages/vscode/src/views/panel/frontend/Panel.tsx

@@ -34,6 +34,8 @@ type ResponseHistoryItem = {
 
 export const Panel = () => {
   const [active_view, set_active_view] = useState<'home' | 'main'>('home')
+  const [main_view_scroll_reset_key, set_main_view_scroll_reset_key] =
+    useState(0)
   const [version, set_version] = useState<string>('')
   const [updating_preset, set_updating_preset] = useState<Preset>()
   const [files_to_review, set_files_to_review] =
@@ -364,6 +366,7 @@ export const Panel = () => {
         })}
       >
         <Main
+          scroll_reset_key={main_view_scroll_reset_key}
           vscode={vscode}
           on_preset_edit={(preset) => {
             post_message(vscode, {
@@ -410,12 +413,14 @@ export const Panel = () => {
           is_active={active_view == 'home'}
           on_new_chat={() => {
             set_active_view('main')
+            set_main_view_scroll_reset_key((k) => k + 1)
             handle_home_view_type_change(HOME_VIEW_TYPES.WEB)
             handle_web_mode_change('edit-context')
             set_chat_input_focus_and_select_key((k) => k + 1)
           }}
           on_api_call={() => {
             set_active_view('main')
+            set_main_view_scroll_reset_key((k) => k + 1)
             handle_home_view_type_change(HOME_VIEW_TYPES.API)
             handle_api_mode_change('edit-context')
             set_chat_input_focus_and_select_key((k) => k + 1)