Add korean example, fix css mobile for bot selection

miku-gg · Mar 4, 2023 · 4d5a6ba · 4d5a6ba
1 parent 1dc261f
commit 4d5a6ba
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/apps/browser-chat/src/components/chat/Chat.tsx b/apps/browser-chat/src/components/chat/Chat.tsx
@@ -34,18 +34,21 @@ export const Chat = ({ sendPrompt }: any): JSX.Element => {
 
   const updateCost = useCallback(
     debounce((value: string) => {
-      setLoadingCost(true);
-      const update_id = Math.random().toString(36).substring(2, 15);
-      lastCostId.id = update_id;
-      botFactory
-        .getInstance()
-        ?.computeCost(value)
-        .then((cost) => {
-          if (lastCostId.id === update_id) {
-            setLoadingCost(false);
-            setCost(cost);
-          }
-        });
+      if (value) {
+        setLoadingCost(true);
+        const update_id = Math.random().toString(36).substring(2, 15);
+        lastCostId.id = update_id;
+        botFactory
+          .getInstance()
+          ?.computeCost(value)
+          .then((cost) => {
+            if (lastCostId.id === update_id) {
+              setLoadingCost(false);
+              setCost(cost);
+            }
+          })
+          .catch(() => setLoadingCost(false));  
+      }
     }, 1000),
     []
   );

diff --git a/apps/browser-chat/src/components/loading/BotLoadingModal.tsx b/apps/browser-chat/src/components/loading/BotLoadingModal.tsx
@@ -6,6 +6,7 @@ import { getBotHashFromUrl, useBot } from '../../libs/botLoader';
 const MIKU_BOT = 'QmbE1Dp8ciYYB2Nkuw2YjhNCd4h1BsJ3YyYSjxjXAagdn9';
 const ELAINA_BOT = 'QmXThSy6BjidXAeTr3nez9ikXsWh5xZgJZxLbbmcCimdAP';
 const NALA_BOT = 'QmTgg126TbobkJgPWKRdwehF1NbHdMQqVHPofr5ZR3wb4N';
+const NALA_BOT_KOREAN = 'QmPNpRcnb5TwDNkqb339rvf7kSYrVAqxRJwrdUYV6wFLfC';
 export const IS_ALPHA_LIVE = window.location.hostname === 'alpha.miku.gg';
 
 export default function BotLoadingModal(): JSX.Element {
@@ -105,13 +106,13 @@ export default function BotLoadingModal(): JSX.Element {
       forceUpdate();
     }
     return (
-      <div className="flex justify-center items-center overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none bg-black bg-opacity-50 backdrop-blur-sm">
-        <div className="relative w-auto my-6 mx-auto max-w-3xl">
+      <div className="flex justify-center flex-wrap items-center overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none bg-black bg-opacity-50 backdrop-blur-sm">
+        <div className="relative w-auto my-6 mx-auto max-w-4xl">
           <div className="border-0 rounded-lg shadow-2xl relative flex flex-col w-full bg-gray-900 outline-none focus:outline-none p-10 items-center">
             <div className="text-2xl mb-10 text-white">
               Select Bot
             </div>
-            <div className="flex flex-row justify-between gap-6 max-[450px]:flex-wrap">
+            <div className="flex flex-row justify-between gap-6 max-md:flex-wrap">
               <button
                 className="flex flex-col w-full items-center pb-10 bg-gray-800 p-9 rounded-lg hover:bg-gray-700 hover:shadow-xl select-none transition-all"
                 onClick={onBotSelect.bind(null, MIKU_BOT)}
@@ -128,6 +129,14 @@ export default function BotLoadingModal(): JSX.Element {
                 <h5 className="mb-1 text-xl font-medium text-white">Nala</h5>
                 <span className="text-sm text-gray-100 bg-green-600 py-1 px-2 mt-4 rounded-lg">GPT3.5-T</span>
               </button>
+              <button
+                className="flex flex-col w-full items-center pb-10 bg-gray-800 p-9 rounded-lg hover:bg-gray-700 hover:shadow-xl select-none transition-all"
+                onClick={onBotSelect.bind(null, NALA_BOT_KOREAN)}
+              >
+                <img className="w-24 h-24 mb-3 rounded-full shadow-lg" src="/nala.png" alt="Bonnie image"/>
+                <h5 className="mb-1 text-xl font-medium text-white">Nala (Korean)</h5>
+                <span className="text-sm text-gray-100 bg-green-600 py-1 px-2 mt-4 rounded-lg">GPT3.5-T</span>
+              </button>
               <button
                 disabled={IS_ALPHA_LIVE}
                 className="flex flex-col w-full items-center pb-10 bg-gray-800 p-9 rounded-lg hover:bg-gray-700 hover:shadow-xl select-none transition-all disabled:blur-sm disabled:hover:bg-gray-800 disabled:hover:shadow-none"

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "bootstrap": "npx lerna bootstrap --include-dependencies",
     "docs": "lerna run start --scope=@mikugg/docs",
     "start": "(cp .env apps/browser-chat || true) && lerna run start --parallel --ignore @mikugg/docs",
-    "pull": "git reset --hard HEAD && git pull origin master && pnpm install && rm -rf apps/browser-chat/node_modules/.vite && lerna run start --parallel --ignore @mikugg/docs",
+    "pull": "git reset --hard HEAD && git pull origin master && pnpm install && rm -rf apps/browser-chat/node_modules/.vite",
     "build": "(cp .env apps/browser-chat || true) && npx lerna run build"
   },
   "workspaces": [