Update chat model category labels

lib/shared/src/models/utils.ts

@@ -29,8 +29,8 @@ export function getModelInfo(modelID: string): {
 
 /** Common {@link ModelProvider.uiGroup} values. */
 export const ModelUIGroup: Record<string, string> = {
-    Accuracy: 'More Accurate',
-    Balanced: 'Balanced (Fast & Accurate)',
-    Speed: 'Faster',
+    Accuracy: 'Optimized for Accuracy',
+    Balanced: 'Balanced (Speed & Accuracy)',
+    Speed: 'Optimized for Speed',
     Ollama: 'Ollama (Local)',
 }

vscode/CHANGELOG.md

@@ -29,7 +29,7 @@ This is a log of all notable changes to Cody for VS Code. [Unreleased] changes a
   - `New Chat with Code`: Opens a new chat with the selected code when no existing chat panel is open and code is selected in the editor.
 - Fixes an issue where triggering a recipe with no open editor window will cause unexpected behavior. [pull/3911](https://github.com/sourcegraph/cody/pull/3911)
 - Edit: The "Document Code" and "Generate Tests" commands now execute with a single click/action, rather than requiring the user to specify the range first. The range can be modified from the normal Edit input. [pull/4071](https://github.com/sourcegraph/cody/pull/4071)
-- Chat: The model selector now groups chat model choices by characteristics (such as "More Accurate", "Balanced", "Faster", and "Ollama") and indicates the default choice. [pull/4033](https://github.com/sourcegraph/cody/pull/4033)
+- Chat: The model selector now groups chat model choices by characteristics (such as "Optimized for Accuracy", "Balanced", "Optimized for Speed", and "Ollama") and indicates the default choice. [pull/4033](https://github.com/sourcegraph/cody/pull/4033) and [pull/4133](https://github.com/sourcegraph/cody/pull/4133)
 
 ## [1.16.7]
 

vscode/webviews/Chat.module.css

@@ -58,7 +58,7 @@
 
 .submit-button,
 .submit-button-disabled {
-    margin-bottom: 0;
+    margin-bottom: 0.0625rem;
 }
 
 .submit-button[disabled] {
@@ -70,6 +70,11 @@
     opacity: 1;
 }
 
+/* Put the up arrow in the exact center */
+.send-icon-arrow-up {
+    transform: translateX(-0.5px);
+}
+
 .text-area-container {
     position: relative;
     width: 100%;

vscode/webviews/Chat.tsx

@@ -568,7 +568,7 @@ export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>
 }
 
 const submitButtonTypes = {
-    user: { icon: 'codicon codicon-arrow-up', title: 'Send Message' },
+    user: { icon: `codicon codicon-arrow-up ${styles.sendIconArrowUp}`, title: 'Send Message' },
     edit: { icon: 'codicon codicon-check', title: 'Update Message' },
     'user-newchat': {
         icon: 'codicon codicon-add',

vscode/webviews/chat/components/ChatActions.tsx

@@ -129,11 +129,12 @@ export const ChatActions: React.FunctionComponent<{
         })
     }, [isMessageInProgress, isEditing, setInputFocus])
 
+    const activeItems = actions.filter(item => item.when)
+
     return (
-        <div className={styles.chatActionsContainer}>
-            {actions
-                .filter(item => item.when)
-                .map(action => (
+        activeItems.length > 0 && (
+            <div className={styles.chatActionsContainer}>
+                {activeItems.map(action => (
                     <button
                         key={action.name}
                         ref={isMessageInProgress && action.focus ? buttonRef : undefined}
@@ -149,6 +150,7 @@ export const ChatActions: React.FunctionComponent<{
                         </span>
                     </button>
                 ))}
-        </div>
+            </div>
+        )
     )
 }

vscode/webviews/components/modelSelectField/ModelSelectField.module.css

@@ -1,6 +1,5 @@
 .model-title-with-icon {
     flex: 1;
-
     display: inline-flex;
     align-items: center;
     gap: 0.45rem;
@@ -9,15 +8,18 @@
     .model-name {
         font-weight: 500;
     }
+
     .model-provider {
         margin-left: 0.25rem;
         opacity: 0.65;
         font-size: 85%;
     }
+
     &.disabled {
         .model-icon {
             opacity: 0.3;
         }
+
         .model-name, .model-provider {
             opacity: 0.6;
         }
@@ -28,19 +30,21 @@
     }
 }
 
-
 .badge  {
     margin-left: auto;
-    line-height: 1;
+    line-height: 16px;
     font-size: 11px;
-    border-radius: 3px;
-    padding: 3px 5px;
-    margin-bottom: -1px;
+    border-radius: 2px;
+    padding: 0 5px;
+    border: 1px solid var(--vscode-contrastBorder);
 }
 
 .cody-pro-badge {
     background: linear-gradient(135deg, #60D5E7 14.14%, #CD8BFA 49.5%, #F4897D 70.71%);
-    color: black;
+    color: #000000;
+    font-weight: 500;
+    text-shadow: rgb(255 240 255) 0 0 3px;
+    letter-spacing: -0.025em;
 }
 
 .other-badge {
@@ -50,7 +54,7 @@
 
 /* Only show provider name and Default badge in dropdown menu, not in the button. */
 button > .model-title-with-icon {
-    .model-provider, .default-badge {
+    .model-provider, .badge {
         display: none;
     }
 }

vscode/webviews/components/modelSelectField/ModelSelectField.tsx

@@ -162,7 +162,7 @@ const ModelTitleWithIcon: FunctionComponent<{
     >
         {showIcon && <ChatModelIcon model={model.model} className={styles.modelIcon} />}
         <span className={styles.modelText}>
-            <span className={styles.modelName}>{capitalize(model.title)}</span>
+            <span className={styles.modelName}>{model.title}</span>
             <span className={styles.modelProvider}>
                 {showProvider && model.provider !== 'Ollama' && `by ${capitalize(model.provider)}`}
             </span>
@@ -176,6 +176,13 @@ const ModelTitleWithIcon: FunctionComponent<{
         {model.provider === 'Ollama' && (
             <span className={clsx(styles.badge, styles.otherBadge)}>Experimental</span>
         )}
+        {(model.title === 'Claude 3 Opus' || model.title === 'GPT-4 Turbo') &&
+        !model.initialDefault &&
+        modelAvailability !== 'needs-cody-pro' ? (
+            <span className={clsx(styles.badge, styles.otherBadge, styles.recommendedBadge)}>
+                Recommended
+            </span>
+        ) : null}
     </span>
 )
 

vscode/webviews/promptEditor/BaseEditor.story.module.css

@@ -1,5 +1,5 @@
 .editor {
-    padding: 0.4375rem 50px 0.5625rem 0.5rem;
+    padding: 0.4375rem 50px 0.4375rem 0.5rem;
     outline: #444 auto 1px;
     border-radius: 2px;
 }

vscode/webviews/promptEditor/PromptEditor.module.css

@@ -7,7 +7,7 @@
     border-radius: 2px;
 
     /* Extra right padding to ensure it doesn't overlap with enhanced context button */
-    padding: 0.4375rem 50px 0.5625rem 0.5rem;
+    padding: 0.375rem 50px 0.375rem 0.375rem;
     font: inherit;
     width: 100%;