From 8f26728a29e4be25a8f3c6a98be295c5a5d8e688 Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Fri, 30 Aug 2024 10:54:24 -0700
Subject: [PATCH] update command keys (#2271)

---
 .../shared_chat_search/FunctionalWrapper.tsx  | 12 +++---
 web/src/components/icons/icons.tsx            | 42 +++++++++++++++++++
 web/src/lib/browserUtilities.tsx              |  5 ++-
 3 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
index 4ef22ef4e604..e66bc32aa4bc 100644
--- a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
+++ b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
@@ -53,10 +53,10 @@ const ToggleSwitch = () => {
         onClick={() => handleTabChange("search")}
       >
         <SearchIcon size={16} className="mr-2" />
-        <p className="items-baseline flex">
+        <div className="flex items-end">
           Search
-          <span className="text-xs ml-2">{commandSymbol}S</span>
-        </p>
+          <div className="ml-2 flex items-end">{commandSymbol}S</div>
+        </div>
       </button>
       <button
         className={`px-4 py-2 rounded-full text-sm font-medium transition-colors duration-300 ease-in-out flex items-center relative z-10 ${
@@ -67,10 +67,10 @@ const ToggleSwitch = () => {
         onClick={() => handleTabChange("chat")}
       >
         <ChatIcon size={16} className="mr-2" />
-        <p className="items-baseline flex">
+        <div className="items-end flex">
           Chat
-          <span className="text-xs ml-2">{commandSymbol}D</span>
-        </p>
+          <div className="ml-2 flex items-end">{commandSymbol}D</div>
+        </div>
       </button>
     </div>
   );
diff --git a/web/src/components/icons/icons.tsx b/web/src/components/icons/icons.tsx
index fe33d4e9c150..377307caef6a 100644
--- a/web/src/components/icons/icons.tsx
+++ b/web/src/components/icons/icons.tsx
@@ -2754,3 +2754,45 @@ export const CameraIcon = ({
     </svg>
   );
 };
+
+export const MacIcon = ({
+  size = 16,
+  className = "my-auto flex flex-shrink-0 ",
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M6.5 4.5a2 2 0 0 1 2 2v2h-2a2 2 0 1 1 0-4Zm4 4v-2a4 4 0 1 0-4 4h2v3h-2a4 4 0 1 0 4 4v-2h3v2a4 4 0 1 0 4-4h-2v-3h2a4 4 0 1 0-4-4v2h-3Zm0 2h3v3h-3v-3Zm5-2v-2a2 2 0 1 1 2 2h-2Zm0 7h2a2 2 0 1 1-2 2v-2Zm-7 0v2a2 2 0 1 1-2-2h2Z"
+      />
+    </svg>
+  );
+};
+
+export const WindowsIcon = ({
+  size = 16,
+  className = "my-auto flex flex-shrink-0 ",
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+    >
+      <path
+        fill="currentColor"
+        d="M3 3h8v8H3V3zm10 0h8v8h-8V3zm-10 10h8v8H3v-8zm10 0h8v8h-8v-8z"
+      />
+    </svg>
+  );
+};
diff --git a/web/src/lib/browserUtilities.tsx b/web/src/lib/browserUtilities.tsx
index 445ed6495071..6646db9b5cc5 100644
--- a/web/src/lib/browserUtilities.tsx
+++ b/web/src/lib/browserUtilities.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { MacIcon, WindowsIcon } from "@/components/icons/icons";
 import { useState, useEffect } from "react";
 
 type OperatingSystem = "Windows" | "Mac" | "Other";
@@ -23,9 +24,9 @@ const KeyboardSymbol = () => {
   const os = useOperatingSystem();
 
   if (os === "Windows") {
-    return "⊞";
+    return <WindowsIcon size={12} />;
   } else {
-    return "⌘";
+    return <MacIcon size={12} />;
   }
 };