Merge pull request #64 from Jonghakseo/dev

Dev
Jonghakseo · Mar 19, 2023 · a5887cd · a5887cd
2 parents cb456c8 + 19ee1b5
commit a5887cd
Show file tree

Hide file tree

Showing 18 changed files with 235 additions and 106 deletions.
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -89,6 +89,9 @@
   "slotDetail_promptInputPlaceholder": {
     "message": "ex. You are a code reviewer."
   },
+  "slotDetail_temperatureTitle": {
+    "message": "Randomness (temperature: 0~2)"
+  },
   "slotDetail_saveButtonText": {
     "message": "SAVE"
   },

diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
@@ -89,6 +89,9 @@
   "slotDetail_promptInputPlaceholder": {
     "message": "例：あなたはコードレビュアーです。"
   },
+  "slotDetail_temperatureTitle": {
+    "message": "無作為性 (temperature: 0~2)"
+  },
   "slotDetail_saveButtonText": {
     "message": "保存"
   },

diff --git a/public/_locales/ko/messages.json b/public/_locales/ko/messages.json
@@ -89,6 +89,9 @@
   "slotDetail_promptInputPlaceholder": {
     "message": "ex. 영어 문장 혹은 단어의 한국어 뜻을 알려줘."
   },
+  "slotDetail_temperatureTitle": {
+    "message": "무작위성 (temperature: 0~2)"
+  },
   "slotDetail_saveButtonText": {
     "message": "저장"
   },

diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
@@ -89,6 +89,9 @@
   "slotDetail_promptInputPlaceholder": {
     "message": "例如：你是一个代码审核者。"
   },
+  "slotDetail_temperatureTitle": {
+    "message": "随机性 (temperature: 0~2)"
+  },
   "slotDetail_saveButtonText": {
     "message": "保存"
   },

diff --git a/src/pages/popup/App.tsx b/src/pages/popup/App.tsx
@@ -1,71 +1,10 @@
-import React from "react";
-import { NoApiKeyPage } from "@pages/popup/pages/NoApiKeyPage";
-import SlotListPage from "@pages/popup/pages/SlotListPage";
-import { useMachine } from "@xstate/react";
-import popupStateMachine from "@pages/popup/xState/popupStateMachine";
-import {
-  sendMessageToBackground,
-  sendMessageToBackgroundAsync,
-} from "@src/chrome/message";
-import MainLayout from "@pages/popup/components/layout/MainLayout";
-import QuickChattingPage from "@pages/popup/pages/QuickChattingPage";
-
-const saveApiKeyToBackground = async (apiKey: string) => {
-  await sendMessageToBackgroundAsync({
-    type: "SaveAPIKey",
-    input: apiKey,
-  });
-};
-
-const getApiKeyFromBackground = async () => {
-  return sendMessageToBackgroundAsync({
-    type: "GetAPIKey",
-  });
-};
-
-const resetApiKeyFromBackground = () => {
-  sendMessageToBackground({
-    message: {
-      type: "ResetAPIKey",
-    },
-  });
-};
+import Popup from "@pages/popup/Popup";
+import StyleProvider from "@pages/popup/style/StyleProvider";
 
 export default function App() {
-  const [state, send] = useMachine(popupStateMachine, {
-    services: {
-      saveApiKeyToBackground: (context) => {
-        return saveApiKeyToBackground(context.openAiApiKey ?? "");
-      },
-      getApiKeyFromBackground,
-    },
-    actions: {
-      resetApiKeyFromBackground,
-    },
-  });
-
-  const checkApiKey = (apiKey: string) => {
-    send({ type: "CHECK_API_KEY", data: apiKey });
-  };
-
   return (
-    <MainLayout>
-      {state.matches("slot_list_page") && (
-        <SlotListPage
-          onClickChangeApiKey={() => send("RESET_API_KEY")}
-          onClickQuickChatButton={() => send("GO_TO_QUICK_CHAT")}
-        />
-      )}
-      {state.hasTag("noApiKeyPage") && (
-        <NoApiKeyPage
-          apiKeyError={state.context.apiKeyCheckError}
-          loading={state.matches("checking_api_key")}
-          checkApiKey={checkApiKey}
-        />
-      )}
-      {state.matches("quick_chat") && (
-        <QuickChattingPage onClickBackButton={() => send("EXIT_QUICK_CHAT")} />
-      )}
-    </MainLayout>
+    <StyleProvider>
+      <Popup />
+    </StyleProvider>
   );
 }
diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { NoApiKeyPage } from "@pages/popup/pages/NoApiKeyPage";
+import SlotListPage from "@pages/popup/pages/SlotListPage";
+import { useMachine } from "@xstate/react";
+import popupStateMachine from "@pages/popup/xState/popupStateMachine";
+import {
+  sendMessageToBackground,
+  sendMessageToBackgroundAsync,
+} from "@src/chrome/message";
+import MainLayout from "@pages/popup/components/layout/MainLayout";
+import QuickChattingPage from "@pages/popup/pages/QuickChattingPage";
+
+const saveApiKeyToBackground = async (apiKey: string) => {
+  await sendMessageToBackgroundAsync({
+    type: "SaveAPIKey",
+    input: apiKey,
+  });
+};
+
+const getApiKeyFromBackground = async () => {
+  return sendMessageToBackgroundAsync({
+    type: "GetAPIKey",
+  });
+};
+
+const resetApiKeyFromBackground = () => {
+  sendMessageToBackground({
+    message: {
+      type: "ResetAPIKey",
+    },
+  });
+};
+
+export default function Popup() {
+  const [state, send] = useMachine(popupStateMachine, {
+    services: {
+      saveApiKeyToBackground: (context) => {
+        return saveApiKeyToBackground(context.openAiApiKey ?? "");
+      },
+      getApiKeyFromBackground,
+    },
+    actions: {
+      resetApiKeyFromBackground,
+    },
+  });
+
+  const checkApiKey = (apiKey: string) => {
+    send({ type: "CHECK_API_KEY", data: apiKey });
+  };
+
+  return (
+    <MainLayout>
+      {state.matches("slot_list_page") && (
+        <SlotListPage
+          onClickChangeApiKey={() => send("RESET_API_KEY")}
+          onClickQuickChatButton={() => send("GO_TO_QUICK_CHAT")}
+        />
+      )}
+      {state.hasTag("noApiKeyPage") && (
+        <NoApiKeyPage
+          apiKeyError={state.context.apiKeyCheckError}
+          loading={state.matches("checking_api_key")}
+          checkApiKey={checkApiKey}
+        />
+      )}
+      {state.matches("quick_chat") && (
+        <QuickChattingPage onClickBackButton={() => send("EXIT_QUICK_CHAT")} />
+      )}
+    </MainLayout>
+  );
+}
diff --git a/src/pages/popup/components/PromptGenerator.tsx b/src/pages/popup/components/PromptGenerator.tsx
@@ -48,8 +48,8 @@ export default function PromptGenerator({ exit }: PromptGeneratorProps) {
       </Text>
       <Textarea
         width="100%"
-        height={80}
-        fontSize={12}
+        height="80px"
+        size="xs"
         lineHeight={1.2}
         value={state.context.inputText}
         placeholder={t("promptGenerator_placeholder")}
@@ -60,8 +60,8 @@ export default function PromptGenerator({ exit }: PromptGeneratorProps) {
       {state.context.outputPrompt && (
         <Textarea
           width="100%"
-          height={80}
-          fontSize={12}
+          size="xs"
+          height="80px"
           lineHeight={1.2}
           value={state.context.outputPrompt}
         />
@@ -72,7 +72,11 @@ export default function PromptGenerator({ exit }: PromptGeneratorProps) {
         </Text>
       )}
       <HStack w="100%" justifyContent="space-between">
-        <StyledButton onClick={() => send("GENERATE")} isLoading={isLoading}>
+        <StyledButton
+          onClick={() => send("GENERATE")}
+          colorScheme="blue"
+          isLoading={isLoading}
+        >
           {t("promptGenerator_generateButton")}
         </StyledButton>
       </HStack>

diff --git a/src/pages/popup/components/SlotDetail.tsx b/src/pages/popup/components/SlotDetail.tsx
@@ -1,5 +1,17 @@
-import { HStack, Input, Text, Textarea, VStack } from "@chakra-ui/react";
-import React, { useState } from "react";
+import {
+  Box,
+  HStack,
+  Input,
+  Slider,
+  SliderFilledTrack,
+  SliderThumb,
+  SliderTrack,
+  Text,
+  Textarea,
+  Tooltip,
+  VStack,
+} from "@chakra-ui/react";
+import { useState } from "react";
 import styled from "@emotion/styled";
 import StyledButton from "@pages/popup/components/StyledButton";
 import { COLORS } from "@src/constant/style";
@@ -35,12 +47,12 @@ export default function SlotDetail({
   };
 
   return (
-    <VStack spacing={12} alignItems="flex-start">
+    <VStack spacing={3} alignItems="flex-start">
       <Text color={COLORS.WHITE} fontSize={12}>
         {t("slotDetail_promptSlotName")}
       </Text>
       <Input
-        fontSize={12}
+        size="xs"
         value={slot.name}
         placeholder={t("slotDetail_promptSlotName_placeholder")}
         onChange={(event) => updateSlot("name", event.target.value)}
@@ -56,7 +68,6 @@ export default function SlotDetail({
         {t("slotDetail_writePromptTitle")}
       </Text>
       <StyledTextArea
-        fontSize={12}
         width={220}
         height={70}
         maxLength={2000}
@@ -67,8 +78,24 @@ export default function SlotDetail({
         }}
         size="xs"
       />
+
+      <Text
+        color={COLORS.WHITE}
+        textAlign="start"
+        whiteSpace="pre-wrap"
+        fontSize={12}
+        lineHeight={1.3}
+      >
+        {t("slotDetail_temperatureTitle")}
+      </Text>
+      <TemperatureSlider
+        temperature={slot.temperature ?? 1}
+        onChangeTemperature={(temperature) => {
+          updateSlot("temperature", temperature);
+        }}
+      />
       <HStack paddingTop={4} width="100%" justifyContent="space-between">
-        <StyledButton onClick={onSaveButtonClick}>
+        <StyledButton onClick={onSaveButtonClick} colorScheme="blue">
           {t("slotDetail_saveButtonText")}
         </StyledButton>
         <StyledButton onClick={exitDetail}>
@@ -78,3 +105,43 @@ export default function SlotDetail({
     </VStack>
   );
 }
+
+type TemperatureSliderProps = {
+  temperature: number;
+  onChangeTemperature: (temperature: number) => void;
+};
+const TemperatureSlider = ({
+  temperature,
+  onChangeTemperature,
+}: TemperatureSliderProps) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  return (
+    <Box pt="6px" pb="2px" w="100%">
+      <Slider
+        min={0}
+        max={2}
+        step={0.1}
+        value={temperature}
+        aria-label="temperature-slider"
+        onChange={(val) => onChangeTemperature(val)}
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+      >
+        <SliderTrack>
+          <SliderFilledTrack />
+        </SliderTrack>
+        <Tooltip
+          hasArrow
+          bg="gray.500"
+          color="white"
+          placement="top"
+          isOpen={showTooltip}
+          label={temperature}
+        >
+          <SliderThumb />
+        </Tooltip>
+      </Slider>
+    </Box>
+  );
+};
diff --git a/src/pages/popup/components/SlotListItem.tsx b/src/pages/popup/components/SlotListItem.tsx
@@ -23,7 +23,7 @@ export default function SlotListItem({
       width="100%"
       backgroundColor={isSelected ? COLORS.PRIMARY : COLORS.WHITE}
       cursor="pointer"
-      padding={8}
+      padding={2}
       borderRadius={4}
       onClick={onSelect}
     >
@@ -37,6 +37,7 @@ export default function SlotListItem({
         </Text>
         <HStack>
           <StyledButton
+            colorScheme={isSelected ? "gray" : "blackAlpha"}
             onClick={(event) => {
               event.stopPropagation();
               onDetail();
@@ -45,6 +46,7 @@ export default function SlotListItem({
             <Text fontSize={11}>{t("slotListItem_editButtonText")}</Text>
           </StyledButton>
           <StyledButton
+            colorScheme={isSelected ? "gray" : "blackAlpha"}
             isDisabled={isSelected}
             onClick={(event) => {
               event.stopPropagation();