diff --git a/src/global.d.ts b/src/global.d.ts index 2a48e56..9c5ae53 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -42,7 +42,7 @@ declare module "*.json" { declare global { type ChatGPTSlot = { - type: "gpt4-turbo" | "gpt4o"; + type: "gpt-4-turbo" | "gpt-4o" | "gpt-3.5-turbo"; system?: string; /** config */ maxTokens?: number; // max 4000 @@ -108,7 +108,7 @@ declare global { type: "RequestQuickChatGPTStream"; input?: { messages: Chat[]; - isGpt4Turbo: boolean; + model: "gpt-4-turbo" | "gpt-4o" | "gpt-3.5-turbo"; }; data?: { result: string; chunk?: string; isDone?: boolean }; }; diff --git a/src/pages/background/index.ts b/src/pages/background/index.ts index 5c22811..31fe8bd 100644 --- a/src/pages/background/index.ts +++ b/src/pages/background/index.ts @@ -83,7 +83,7 @@ chrome.runtime.onConnect.addListener((port) => { await chatGPT({ input: "hello", apiKey: message.input, - slot: { type: "gpt4o" }, + slot: { type: "gpt-3.5-turbo" }, }).catch((error) => { ApiKeyStorage.setApiKey(null); throw error; @@ -136,14 +136,17 @@ chrome.runtime.onConnect.addListener((port) => { break; } case "RequestQuickChatGPTStream": { + if (!message.input) { + throw Error("RequestQuickChatGPTStream input is undefined"); + } await QuickChatHistoryStorage.pushChatHistories({ role: "user", - content: message.input?.messages.at(-1)?.content ?? "", + content: message.input.messages.at(-1)?.content ?? "", }); const apiKey = await ApiKeyStorage.getApiKey(); const response = await chatGPT({ - chats: message.input?.messages, - slot: { type: message.input?.isGpt4Turbo ? "gpt4-turbo" : "gpt4o" }, + chats: message.input.messages, + slot: { type: message.input.model }, apiKey, onDelta: (chunk) => { sendResponse({ @@ -204,7 +207,7 @@ chrome.runtime.onConnect.addListener((port) => { const response = await chatGPT({ input: message.input, slot: { - type: "gpt4o", + type: "gpt-4o", system: PROMPT_GENERATE_PROMPT, }, apiKey, diff --git a/src/pages/background/lib/infra/chatGPT.ts b/src/pages/background/lib/infra/chatGPT.ts index 4c3f55c..13f18cb 100644 --- a/src/pages/background/lib/infra/chatGPT.ts +++ b/src/pages/background/lib/infra/chatGPT.ts @@ -1,5 +1,6 @@ import { OpenAI } from "openai"; import { ChatCompletionMessageParam } from "openai/resources"; +import { ChatModel } from "openai/src/resources/chat/chat"; export async function chatGPT({ input, @@ -34,7 +35,7 @@ export async function chatGPT({ const stream = client.beta.chat.completions .stream({ messages, - model: slot.type === "gpt4-turbo" ? "gpt-4-turbo" : "gpt-4o", + model: slot.type, max_tokens: slot.maxTokens, temperature: slot.temperature, top_p: slot.topP, diff --git a/src/pages/background/lib/service/slotsManipulatorService.test.ts b/src/pages/background/lib/service/slotsManipulatorService.test.ts index d79a3af..3c44caf 100644 --- a/src/pages/background/lib/service/slotsManipulatorService.test.ts +++ b/src/pages/background/lib/service/slotsManipulatorService.test.ts @@ -4,7 +4,7 @@ const defaultSlot: Slot = { id: "1", name: "name", isSelected: false, - type: "gpt4o", + type: "gpt-4o", }; describe("SlotsManipulator test", () => { diff --git a/src/pages/background/lib/storage/slotStorage.test.ts b/src/pages/background/lib/storage/slotStorage.test.ts index d2c1a8f..da9b655 100644 --- a/src/pages/background/lib/storage/slotStorage.test.ts +++ b/src/pages/background/lib/storage/slotStorage.test.ts @@ -59,7 +59,7 @@ describe("SlotStorage test", () => { test("선택된 슬롯이 없으면 에러가 발생한다", async () => { // given const savedSlots: Slot[] = [ - { type: "gpt4o", id: "id", name: "name", isSelected: false }, + { type: "gpt-4o", id: "id", name: "name", isSelected: false }, ]; jest .spyOn(SlotStorage, "getAllSlots") @@ -76,7 +76,7 @@ describe("SlotStorage test", () => { test("선택된 슬롯이 있으면 가져온다", async () => { // given const savedSelectedSlot: Slot = { - type: "gpt4o", + type: "gpt-4o", id: "id", name: "name", isSelected: true, @@ -99,7 +99,7 @@ describe("SlotStorage test", () => { // given const savedSlots: Slot[] = []; const slot: Slot = { - type: "gpt4o", + type: "gpt-4o", id: "id", name: "name", isSelected: false, @@ -121,14 +121,14 @@ describe("SlotStorage test", () => { // given const savedSlots: Slot[] = [ { - type: "gpt4o", + type: "gpt-4o", id: "id1", name: "name", isSelected: false, }, ]; const slot: Slot = { - type: "gpt4o", + type: "gpt-4o", id: "id2", name: "name", isSelected: false, @@ -150,7 +150,7 @@ describe("SlotStorage test", () => { test("updateSlot", async () => { // given const slot: Slot = { - type: "gpt4o", + type: "gpt-4o", id: "id", name: "name", isSelected: false, @@ -175,7 +175,7 @@ describe("SlotStorage test", () => { // given const slotId = "slotId"; const slot: Slot = { - type: "gpt4o", + type: "gpt-4o", id: slotId, name: "name", isSelected: false, diff --git a/src/pages/popup/components/SlotDetail.tsx b/src/pages/popup/components/SlotDetail.tsx index 8c09f96..5da2f25 100644 --- a/src/pages/popup/components/SlotDetail.tsx +++ b/src/pages/popup/components/SlotDetail.tsx @@ -1,18 +1,23 @@ import { Box, + Button, + ButtonProps, HStack, Input, + Menu, + MenuButton, + MenuItem, + MenuList, Slider, SliderFilledTrack, SliderThumb, SliderTrack, - Switch, Text, Textarea, Tooltip, VStack, } from "@chakra-ui/react"; -import { useState } from "react"; +import { forwardRef, ForwardRefRenderFunction, useState } from "react"; import styled from "@emotion/styled"; import StyledButton from "@pages/popup/components/StyledButton"; import { COLORS } from "@src/constant/style"; @@ -34,7 +39,6 @@ export default function SlotDetail({ exitDetail, }: SlotDetailProps) { const [slot, setSlot] = useState(initialSlot); - const isGpt4Turbo = slot.type === "gpt4-turbo"; const onSaveButtonClick = () => { onUpdate(slot); @@ -48,11 +52,6 @@ export default function SlotDetail({ })); }; - const toggleGpt4TurboSwitch = () => { - updateSlot("type", isGpt4Turbo ? "gpt4-turbo" : "gpt4o"); - console.log(isGpt4Turbo, slot); - }; - return ( @@ -100,16 +99,23 @@ export default function SlotDetail({ updateSlot("temperature", temperature); }} /> - - - {t("slotDetail_isGpt4Turbo")} - - + + + + {slot.type} + + + updateSlot("type", "gpt-3.5-turbo")}> + gpt-3.5-turbo + + updateSlot("type", "gpt-4o")}> + gpt-4o + + updateSlot("type", "gpt-4-turbo")}> + gpt-4-turbo + + + @@ -123,6 +129,13 @@ export default function SlotDetail({ ); } +const ModelSelectButton: ForwardRefRenderFunction< + HTMLButtonElement, + ButtonProps +> = (props, ref) => { + return