Chat: Update welcome message (#2298)

This updates the welcome message to not be in first-person and make it
more transparent that you're chatting with the model shown at the top.
It also includes clearer keyboard shortcuts, and actual icons of the
buttons they can expect to find in the interface (sidebar, title, status
bar, etc).

| Before | After |
| - | - |
| <img width="581" alt="Screenshot 2023-12-12 at 10 59 52 pm"
src="https://github.com/sourcegraph/cody/assets/153/d7887fff-03df-401e-bde6-d99798187cba">
| <img width="581" alt="Screenshot 2023-12-12 at 10 58 41 pm"
src="https://github.com/sourcegraph/cody/assets/153/3f6f214e-14de-48e9-b84b-5215ccbf1a7b">
|

Fixes #2282 

## Test plan

- Started a new chat
- Clicked on all the links

lib/ui/src/Chat.tsx

@@ -670,7 +670,5 @@ function welcomeText({
     helpMarkdown = 'See [Cody documentation](https://docs.sourcegraph.com/cody) for help and tips.',
     afterMarkdown,
 }: WelcomeTextOptions): string {
-    return ["Hello! I'm Cody. I can write code and answer coding questions for you. " + helpMarkdown, afterMarkdown]
-        .filter(isDefined)
-        .join('\n\n')
+    return [helpMarkdown, afterMarkdown].filter(isDefined).join('\n\n')
 }

vscode/CHANGELOG.md

@@ -16,6 +16,7 @@ This is a log of all notable changes to Cody for VS Code. [Unreleased] changes a
 - Settings: Relabel "symf Context" as "Search Context". [pull/2285](https://github.com/sourcegraph/cody/pull/2285)
 - Chat: Removed 'Chat Suggestions' setting. [pull/2284](https://github.com/sourcegraph/cody/pull/2284)
 - Edit: Completed edits are no longer scrolled back into view in the active file. [pull/2297](https://github.com/sourcegraph/cody/pull/2297)
+- Chat: Update welcome message. [pull/2298](https://github.com/sourcegraph/cody/pull/2298)
 
 ## [0.18.4]
 

vscode/src/commands/menus/index.ts

@@ -40,7 +40,7 @@ export async function showCommandMenu(
     items: (QuickPickItem | QuickPickItemWithSlashCommand)[]
 ): Promise<CommandMenuResponse> {
     const options = {
-        title: `Cody (Shortcut: ${platform() === 'darwin' ? '⌥' : 'Alt+'}C)`,
+        title: `Cody Commands (Shortcut: ${platform() === 'darwin' ? '⌥' : 'Alt+'}C)`,
         placeHolder: 'Search for a command or enter your question here...',
     }
 

vscode/webviews/App.tsx

@@ -340,13 +340,17 @@ function addInstructions<T extends CodyPrompt>([key, command]: [string, T]): [st
 }
 
 function getWelcomeMessageByOS(os: string): string {
-    const welcomeMessageMarkdown = `Start writing code and I’ll autocomplete lines and entire functions for you.
+    const welcomeMessageMarkdown = `Welcome to Cody! Start writing code and Cody will autocomplete lines and entire functions for you.
 
-You can ask me to explain, document and edit code using the [Cody Commands](command:cody.action.commands.menu) action (${
+To run [Cody Commands](command:cody.action.commands.menu) use the keyboard shortcut <span class="keyboard-shortcut"><span>${
         os === 'darwin' ? '⌥' : 'Alt'
-    }+C), or by right-clicking on code and using the “Cody” menu.
+    }</span><span>C</span></span>, the <span class="cody-icons">A</span> button, or right-click anywhere in your code.
 
-See the [Getting Started](command:cody.welcome) guide for more tips and tricks.
+You can start a new chat at any time with <span class="keyboard-shortcut"><span>${
+        os === 'darwin' ? '⌥' : 'Alt'
+    }</span><span>/</span></span> or using the <span class="cody-icons">H</span> button.
+
+For more tips and tricks, see the [Getting Started Guide](command:cody.welcome) and [docs](https://docs.sourcegraph.com/cody).
 `
     return welcomeMessageMarkdown
 }

vscode/webviews/index.css

@@ -1,6 +1,12 @@
 @import '@sourcegraph/cody-ui/src/index.css';
 @import '@vscode/codicons/dist/codicon';
 
+@font-face {
+    font-family: cody-icons;
+    font-display: block;
+    src: url('../resources/cody-icons.woff') format('woff');
+}
+
 :root {
     /* Our syntax highlighter expects a dark code background color, regardless of the VS Code color
     theme. */
@@ -48,3 +54,41 @@ a:hover {
 .cody-chat-error > span {
     font-weight: bold;
 }
+
+.cody-icons {
+    font: normal normal normal 16px/1 cody-icons;
+    display: inline-block;
+    text-decoration: none;
+    text-rendering: auto;
+    text-align: center;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    user-select: none;
+    transform: translateY(25%); /* Hacky adjustment for font baseline */
+}
+
+.keyboard-shortcut {
+    color: var(--vscode-keybindingLabel-foreground);
+    display: inline-flex;
+    align-items: center;
+    line-height: 10px;
+    white-space: nowrap;
+}
+
+.keyboard-shortcut > span {
+    display: inline-block;
+    background-color: var(--vscode-keybindingLabel-background);
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--vscode-keybindingLabel-border) var(--vscode-keybindingLabel-border) var(--vscode-keybindingLabel-bottomBorder) var(--vscode-keybindingLabel-border);
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
+    vertical-align: middle;
+    font-size: 11px;
+    padding: 3px 5px;
+    margin: 0 2px;
+}
+
+.keyboard-shortcut > span:first-child {
+    margin-left: 0;
+}