Refactor frontend UI components, update README feature descriptions, and enhance UI controls with context-aware disabled states

Author: robertpiosik

README.md

@@ -3,11 +3,11 @@
   <br/>
   <h1>Code Web Chat (CWC)</h1>
   <h4 style="line-height: 1.8">
-  👉 Copy selected folders and files for web chats or initialize them hands-free!
+  👉 Select context, type instructions and continue in Chrome or Firefox
   <br/>
-  👉 Apply chat responses with truncated, whole or diff markdown code blocks
+  👉 Apply chat responses in truncated, whole or diff edit formats
   <br/>
-  👉 Use the same context for quality code completions and file refactorings
+  👉 Use SOTA models for quality code completions and file refactorings
   <br/>
   👉 Generate meaningful commit messages
   </h4>
@@ -59,14 +59,14 @@ The result? Unmatched in cost, speed and accuracy AI assistance.
 
 ## Web chats
 
-As everyone have their own favorite chatbot, each with unique features and feel, CWC's core feature is their hands-free initialization.
+As everyone have their own favorite chatbot, each with unique capabilities, CWC lets you initialize them hands-free!
 
 **The feature has two modes:**
 
-- General - context and your instructions
-- Code Completions - context, open editor with marked cursor position
+- General - select context and type instructions
+- Code Completions - select context and place cursor
 
-Additional texts for model's guidance are fully adjustable in settings.
+Generated prompts are simple and adjustable.
 
 **_Apply Chat Response_** is a smart tool that automatically integrates chat responses with the codebase, either refactoring with API ("Truncated" edit format), replacing original files in place ("Whole" edit format) or patching with diffs ("Diff" edit format).
 

packages/ui/src/components/editor/ApiToolHeader/ApiToolHeader.module.scss

@@ -0,0 +1,44 @@
+.header {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &__top {
+    display: flex;
+    justify-content: center;
+    font-size: 13px;
+    color: var(--vscode-descriptionForeground);
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      left: 0;
+      height: 1px;
+      background-color: var(--vscode-sideBarSectionHeader-border);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    > span {
+      background-color: var(--vscode-sideBar-background);
+      padding: 0 10px;
+      z-index: 1;
+      position: relative;
+    }
+  }
+
+  &__bottom {
+    font-size: 16px;
+    font-weight: bold;
+    padding: 2px 0 6px 0;
+    text-align: center;
+    color: var(--vscode-editor-foreground);
+  }
+
+  &__description {
+    font-size: 12px;
+    color: var(--vscode-editor-foreground);
+  }
+}

packages/ui/src/components/editor/ApiToolHeader/ApiToolHeader.stories.tsx

@@ -0,0 +1,13 @@
+import { ApiToolHeader } from './ApiToolHeader'
+
+export default {
+  component: ApiToolHeader,
+}
+
+export const Default = () => (
+  <ApiToolHeader
+    top_line="API TOOL"
+    bottom_line="Code Completions"
+    description="Use any model for accurate code completions. The tool attaches selected context in each request."
+  />
+)

…figurationHeader/ConfigurationHeader.tsx …s/editor/ApiToolHeader/ApiToolHeader.tsxpackages/ui/src/components/editor/ConfigurationHeader/ConfigurationHeader.tsx renamed to packages/ui/src/components/editor/ApiToolHeader/ApiToolHeader.tsx packages/ui/src/components/editor/ConfigurationHeader/ConfigurationHeader.tsx renamed to packages/ui/src/components/editor/ApiToolHeader/ApiToolHeader.tsx

@@ -1,16 +1,18 @@
 import React from 'react'
-import styles from './ConfigurationHeader.module.scss'
+import styles from './ApiToolHeader.module.scss'
 
 type Props = {
   top_line: string
   bottom_line: string
   description: string
 }
 
-export const ConfigurationHeader: React.FC<Props> = (props) => {
+export const ApiToolHeader: React.FC<Props> = (props) => {
   return (
     <div className={styles.header}>
-      <div className={styles.header__top}>{props.top_line}</div>
+      <div className={styles.header__top}>
+        <span>{props.top_line}</span>
+      </div>
       <div className={styles.header__bottom}>{props.bottom_line}</div>
       <div className={styles.header__description}>{props.description}</div>
     </div>

packages/ui/src/components/editor/ApiToolHeader/index.ts

@@ -0,0 +1 @@
+export * from './ApiToolHeader'

packages/ui/src/components/editor/ConfigurationHeader/ConfigurationHeader.module.scss

@@ -67,7 +67,7 @@
     padding: 0 4px;
     height: 24px;
     border-radius: var(--border-radius-4px);
-    opacity: 0.3;
+    opacity: 0.5;
 
     &:focus {
       outline: none;

packages/ui/src/components/editor/ConfigurationHeader/index.ts

@@ -1,8 +1,16 @@
 .container {
+  padding: 0 var(--padding-12px);
+}
+
+.inner {
   display: flex;
   flex-direction: column;
   gap: var(--padding-4px);
-  padding: 0 var(--padding-12px);
+
+  &--disabled {
+    pointer-events: none;
+    opacity: var(--disabled-opacity);
+  }
 }
 
 .heading {
@@ -28,20 +36,15 @@
     color: var(--vscode-foreground);
     background-color: var(--vscode-list-hoverBackground);
 
-    &:disabled {
-      opacity: var(--disabled-opacity);
-      cursor: not-allowed;
-    }
-
-    &:hover:enabled {
+    &:hover {
       background-color: var(--vscode-toolbar-hoverBackground);
     }
 
     &--selected {
       color: var(--vscode-button-foreground);
       background-color: var(--vscode-button-background);
 
-      &:hover:enabled {
+      &:hover {
         background-color: var(--vscode-button-hoverBackground);
       }
     }

packages/ui/src/components/editor/Header/Header.module.scss

@@ -33,6 +33,8 @@ export const EditFormatExample = () => {
       options={options}
       selected_value={format}
       on_select={set_format}
+      disabled_state_title=""
+      is_disabled={false}
     />
   )
 }
@@ -52,6 +54,8 @@ export const GenericExample = () => {
       options={options}
       selected_value={value}
       on_select={set_value}
+      disabled_state_title=""
+      is_disabled={false}
     />
   )
 }