More keyboard shorcut UI stuff

extensions/vscode/src/commands.ts

@@ -31,6 +31,7 @@ import EditDecorationManager from "./quickEdit/EditDecorationManager";
 import { QuickEdit, QuickEditShowParams } from "./quickEdit/QuickEditQuickPick";
 import { Battery } from "./util/battery";
 import { VsCodeIde } from "./VsCodeIde";
+import { getMetaKeyLabel } from "./util/util";
 
 import type { VsCodeWebviewProtocol } from "./webviewProtocol";
 
@@ -902,15 +903,18 @@ const getCommandsMap: (
             ? StatusBarStatus.Enabled
             : StatusBarStatus.Disabled;
       }
+
       quickPick.items = [
         {
           label: "$(question) Open help center",
         },
         {
-          label: "$(comment) Open chat (Cmd+L)",
+          label: "$(comment) Open chat",
+          description: getMetaKeyLabel() + " + L",
         },
         {
-          label: "$(screen-full) Open full screen chat (Cmd+K Cmd+M)",
+          label: "$(screen-full) Open full screen chat",
+          description: getMetaKeyLabel() + " + K, " + getMetaKeyLabel() + " + M",
         },
         {
           label: quickPickStatusText(targetStatus),

extensions/vscode/src/util/util.ts

@@ -99,9 +99,9 @@ export function getMetaKeyLabel() {
       return "⌘";
     case "linux":
     case "windows":
-      return "^";
+      return "Ctrl";
     default:
-      return "^";
+      return "Ctrl";
   }
 }
 

gui/src/components/History/index.tsx

@@ -1,6 +1,7 @@
 import { SessionMetadata } from "core";
 import MiniSearch from "minisearch";
 import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import Glyph from '../gui/Glyph';
 
 import { getFontSize, getMetaKeyLabel } from "../../util";
 import { HistoryTableRow } from "./HistoryTableRow";
@@ -98,10 +99,8 @@ export function History() {
 
       {filteredAndSortedSessions.length === 0 && (
         <div className="m-4 text-center">
-          No past sessions found. To start a new session, either click the "+"
-          button or use the keyboard shortcut: <code>{getMetaKeyLabel()}</code>
-          {` `}
-          <code>L</code>
+          No past sessions found. To start a new session, either click the <Glyph>+</Glyph>
+          button or use the keyboard shortcut: <kbd>{getMetaKeyLabel()}</kbd> + <kbd>L</kbd>
         </div>
       )}
 

gui/src/components/gui/Glyph.tsx

@@ -0,0 +1,46 @@
+import type React from "react"
+import styled from "styled-components"
+import { lightGray } from ".."
+
+const StyledGlyph = styled.span`
+  position: relative;
+  display: inline-block;
+  font-family: var(--monaco-monospace-font);
+  font-size: 22px;
+  font-weight: lighter;
+  vertical-align: -0.1rem;
+  margin: 0 6px 0 2px;
+  line-height: 0.7;
+  color: --vscode-editor-foreground;
+  z-index: 1;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 66%;
+    left: -10%;
+    transform: translateY(-50%);
+    width: 17px;
+    height: 17px;
+    border: 1px solid ${lightGray}33;
+    background-color: ${lightGray}33;
+    border-radius: 3px;
+    box-sizing: border-box;
+    z-index: -1;
+  }
+`
+
+interface GlyphProps {
+  children: string
+}
+
+const Glyph: React.FC<GlyphProps> = ({ children }) => {
+  if (children !== "+") {
+    console.warn('Currently, only the "+" glyph is supported.')
+    return null
+  }
+
+  return <StyledGlyph>{children}</StyledGlyph>
+}
+
+export default Glyph

gui/src/components/mainInput/TutorialCard.tsx

@@ -69,14 +69,14 @@ export function TutorialCard({ onClose }: TutorialCardProps) {
         <li className="flex items-start">
           <PencilSquareIcon className="h-4 w-4 pr-3 align-middle" />
           <span>
-            Highlight code and press <code>{getMetaKeyLabel() + "I"}</code> to
+            Highlight code and press <kbd>{getMetaKeyLabel()}</kbd> + <kbd>I</kbd> to
             quickly make natural language edits
           </span>
         </li>
         <li className="flex items-start">
           <ClipboardDocumentIcon className="h-4 w-4 pr-3 align-middle" />
           <span>
-            Highlight code and press <code>{getMetaKeyLabel() + "L"}</code> to
+            Highlight code and press <kbd>{getMetaKeyLabel()}</kbd> + <kbd>L</kbd> to
             add it to the chat window
           </span>
         </li>

gui/src/components/modelSelection/ModelSelect.tsx

@@ -367,13 +367,13 @@ function ModelSelect() {
             <Divider className="!my-0" />
 
             <span className="block px-3 py-3" style={{ color: lightGray }}>
-              <code>{getMetaKeyLabel()} + '</code> to toggle
+              <kbd>{getMetaKeyLabel()}</kbd> + <kbd>'</kbd> to toggle model
             </span>
           </div>
         </StyledListboxOptions>
       </div>
     </Listbox>
   );
-}
+} 
 
 export default ModelSelect;

gui/src/index.css

@@ -103,3 +103,9 @@ body {
   direction: rtl;
   width: 100%;
 }
+
+kbd {
+  /* font-family: var(--monaco-monospace-font); */
+  font-size: 11px;
+  color: --vscode-editor-foreground;
+}