Improve response preview focus handling by auto-focusing Accept and refocusing chat input on finish, with updated button focus outlines

- once response preview opens, 'accept' button should be focused
- should set [Fragment] after 3 seconds from the response preview start
- set opacity to the outline 50%
- outline color should follow button's backgorund color (with exception to secondary: there follow 'color')
- once response preview gets closed, prompt field should be focused

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   ├── backend
│                   │   └── prompt-view-provider.ts
│                   ├── frontend
│                   │   ├── Main
│                   │   │   ├── Main.tsx
│                   │   │   └── MainView
│                   │   │       └── MainView.tsx
│                   │   ├── Prompt.tsx
│                   │   └── hooks
│                   │       ├── use-preview-manager.ts
│                   │       └── use-prompt
│                   │           └── use-prompt.ts
│                   └── types
│                       └── messages.ts
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    ├── common
                    │   ├── Button
                    │   │   ├── Button.module.scss
                    │   │   ├── Button.tsx
                    │   │   └── index.ts
                    │   └── prompts
                    │       └── PromptField
                    │           ├── PromptField.tsx
                    │           └── hooks
                    │               └── use-handlers
                    │                   └── use-handlers.ts
                    └── prompt-view
                        ├── Page
                        │   ├── Page.tsx
                        │   └── index.ts
                        └── ResponsePreviewFooter
                            ├── ResponsePreviewFooter.tsx
                            └── index.ts

Author: robertpiosik

apps/editor/src/views/prompt/frontend/hooks/use-prompt/use-prompt.ts

@@ -194,6 +194,8 @@ export const use_prompt = (vscode: any) => {
         set_is_modern_ui(message.is_modern_ui)
       } else if (message.command === 'API_CONFIGURATIONS') {
         set_api_configurations((message as any).configurations)
+      } else if (message.command === 'RESPONSE_PREVIEW_FINISHED') {
+        set_chat_input_focus_key((k) => k + 1)
       }
     }
     window.addEventListener('message', handle_message)

packages/ui/src/components/editor/common/Button/Button.module.scss

@@ -19,9 +19,10 @@
     text-decoration: none;
   }
 
-  &:focus-visible {
+  &:focus {
     outline-offset: 2px;
-    outline: 1px solid var(--vscode-focusBorder);
+    outline: 1px solid
+      color-mix(in srgb, var(--vscode-button-background) 50%, transparent);
   }
 
   &:disabled {
@@ -37,6 +38,10 @@
     background-color: var(--cwc-bg-secondary);
     color: var(--cwc-text-color);
 
+    &:focus {
+      outline-color: var(--cwc-bg-secondary);
+    }
+
     &:hover {
       background-color: var(--cwc-bg-primary);
     }
@@ -51,6 +56,14 @@
   &--danger {
     background-color: var(--vscode-inputValidation-errorBorder);
 
+    &:focus {
+      outline-color: color-mix(
+        in srgb,
+        var(--vscode-inputValidation-errorBorder) 50%,
+        transparent
+      );
+    }
+
     &:hover {
       background-color: color-mix(
         in srgb,

packages/ui/src/components/editor/prompt-view/ResponsePreviewFooter/ResponsePreviewFooter.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import { use_compacting } from '@shared/hooks'
 import { Button } from '../../common/Button'
 import styles from './ResponsePreviewFooter.module.scss'
@@ -11,6 +12,14 @@ type Props = {
 
 export const ResponsePreviewFooter: React.FC<Props> = (props) => {
   const { container_ref, compact_step } = use_compacting()
+  const [is_accept_focused, set_is_accept_focused] = useState(false)
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      set_is_accept_focused(true)
+    }, 500)
+    return () => clearTimeout(timeout)
+  }, [])
 
   return (
     <div className={styles.container} ref={container_ref}>
@@ -34,6 +43,7 @@ export const ResponsePreviewFooter: React.FC<Props> = (props) => {
         on_click={props.on_accept}
         disabled={props.is_accept_disabled}
         title="Accept"
+        is_focused={is_accept_focused}
         codicon={compact_step >= 3 ? 'check' : undefined}
       >
         {compact_step < 3 && <span>Accept</span>}