Zeta AI: fix logos and base path (#412)

src/components/Cmdk/components/Cmdk.tsx

@@ -14,6 +14,7 @@ import { IconClaim, IconCode, IconServer } from "~/components/shared";
 import { ArrowIcon } from "./ArrowIcon";
 import { CmdkBreadcrumb } from "./CmdkBreadcrumb";
 import { CmdkChat } from "./CmdkChat";
+import { ExperimentalIcon } from "./ExperimentalIcon";
 import { FeedbackIcon } from "./FeedbackIcon";
 import { ZetaAiIcon } from "./ZetaAiIcon";
 
@@ -177,20 +178,6 @@ export const Cmdk: React.FC<CmdkProps> = ({ isOpen, setIsCmdkOpen }) => {
     });
   }, []);
 
-  const onKeyDown = React.useCallback(
-    (e: KeyboardEvent) => {
-      if (isHome || inputValue.length) {
-        return;
-      }
-
-      if (e.key === "Backspace") {
-        e.preventDefault();
-        popPage();
-      }
-    },
-    [inputValue.length, isHome, popPage]
-  );
-
   const commandListMaxHeight = activePage === "chat" ? "min(600px, 50vh)" : "auto";
 
   return (
@@ -248,7 +235,7 @@ export const Cmdk: React.FC<CmdkProps> = ({ isOpen, setIsCmdkOpen }) => {
                   <ZetaAiIcon className="ml-2" />
                 </div>
                 <div className="flex items-center ml-3 rounded-full bg-surface-200 text-foreground-light border border-strong border-grey-600 pl-3 pr-3 py-1.5">
-                  <img className="mr-2" src="/img/logos/experimental.svg" width="20" />
+                  <ExperimentalIcon className="mr-2" />
                   <Typography className="uppercase dark:text-grey-300">Experimental</Typography>
                 </div>
               </CmdkBreadcrumb>

src/components/Cmdk/components/CmdkChat.tsx

@@ -25,7 +25,13 @@ const AssistantMessage: React.FC<{ children: React.ReactNode; className?: string
 
 export const CmdkChat: React.FC<CmdkChatProps> = ({ initialValue, setCmdkInputValue }) => {
   const inputRef = useRef<HTMLInputElement>(null);
-  const { messages, append, handleSubmit, input, handleInputChange, error, isLoading, setInput } = useChat();
+  const basePath =
+    process.env.NEXT_PUBLIC_BASE_PATH && typeof window !== "undefined"
+      ? `https://${window.location.host}/${process.env.NEXT_PUBLIC_BASE_PATH}`
+      : "";
+  const { messages, append, handleSubmit, input, handleInputChange, error, isLoading, setInput } = useChat({
+    api: `${basePath}/api/chat`,
+  });
 
   const isLoadingAssistantMessage = isLoading;
 

src/components/Cmdk/components/ExperimentalIcon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+export const ExperimentalIcon: React.FC<ExperimentalIconProps> = ({ className }) => {
+  return (
+    <svg
+      width="14"
+      height="12"
+      viewBox="0 0 14 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.49989 0.166626H9.49989V4.78101C9.49989 5.00202 9.58769 5.21398 9.74397 5.37026L13.0773 8.7036C14.2322 9.85854 13.4143 11.8333 11.7809 11.8333H2.21884C0.585518 11.8333 -0.232453 9.85853 0.922482 8.7036L4.25582 5.37026C4.4121 5.21398 4.49989 5.00202 4.49989 4.78101V0.166626ZM3.3474 7.69289L4.96292 6.07737C5.30674 5.73355 5.49989 5.26724 5.49989 4.78101V1.16663H8.49989V4.78101C8.49989 5.26724 8.69305 5.73355 9.03686 6.07737L10.1453 7.1858L9.77706 7.11216C8.79581 6.91591 7.77713 7.05233 6.88208 7.49985L6.67049 7.60564C5.97435 7.95372 5.18204 8.05982 4.41884 7.90718L3.3474 7.69289ZM11.5975 8.63796C11.4813 8.52218 11.3335 8.44325 11.1726 8.41108L9.58095 8.09274C8.81775 7.9401 8.02544 8.0462 7.32929 8.39428L7.11771 8.50007C6.22266 8.94759 5.20398 9.08401 4.22272 8.88776L2.93489 8.63019C2.66167 8.57555 2.37922 8.66107 2.1822 8.85809L1.62959 9.4107C1.10462 9.93567 1.47642 10.8333 2.21884 10.8333H11.7809C12.5234 10.8333 12.8952 9.93567 12.3702 9.41071L11.5975 8.63796Z"
+        fill="#00BC8D"
+      />
+    </svg>
+  );
+};
+
+interface ExperimentalIconProps {
+  className: string;
+}