();
13 |
14 | useEffect(() => {
15 | const root = document.getElementById(ROOT_ID);
16 | if (root && root.shadowRoot) {
17 | setEmotionStyles(root);
18 | }
19 | }, [shadowRootRef.current?.shadowRoot]);
20 |
21 | function setEmotionStyles(ref: HTMLElement) {
22 | if (!ref?.shadowRoot) {
23 | return;
24 | }
25 |
26 | if (ref && !emotionCache) {
27 | const createdInflabEmotionWithRef = createCache({
28 | key: "drag-gpt-key",
29 | container: ref.shadowRoot,
30 | });
31 |
32 | setEmotionCache(createdInflabEmotionWithRef);
33 | }
34 | }
35 |
36 | return (
37 |
38 | {emotionCache && (
39 | {children}
40 | )}
41 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/src/shared/hook/useScrollDownEffect.ts:
--------------------------------------------------------------------------------
1 | import { DependencyList, useEffect, useRef } from "react";
2 |
3 | export function useScrollDownEffect(deps?: DependencyList) {
4 | const scrollDownRef = useRef(null);
5 | const isActivate = useRef(true);
6 |
7 | useEffect(() => {
8 | if (!scrollDownRef.current) {
9 | return;
10 | }
11 | if (!isActivate.current) {
12 | return;
13 | }
14 | scrollDownRef.current.scrollTo({
15 | top: scrollDownRef.current.scrollHeight,
16 | });
17 | }, deps);
18 |
19 | useEffect(() => {
20 | if (!scrollDownRef.current) {
21 | return;
22 | }
23 | let lastScroll = scrollDownRef.current.scrollTop;
24 | const onScroll = () => {
25 | if (!scrollDownRef.current) {
26 | return;
27 | }
28 | const isScrollDownNow = scrollDownRef.current.scrollTop > lastScroll;
29 | isScrollDownNow ? on() : off();
30 | lastScroll = scrollDownRef.current.scrollTop;
31 | };
32 |
33 | scrollDownRef.current.addEventListener("scroll", onScroll);
34 |
35 | return () => {
36 | scrollDownRef.current?.removeEventListener("scroll", onScroll);
37 | };
38 | }, []);
39 |
40 | const off = () => {
41 | isActivate.current = false;
42 | };
43 |
44 | const on = () => {
45 | isActivate.current = true;
46 | };
47 |
48 | return { scrollDownRef };
49 | }
50 |
--------------------------------------------------------------------------------
/utils/reload/initReloadClient.ts:
--------------------------------------------------------------------------------
1 | import {
2 | LOCAL_RELOAD_SOCKET_URL,
3 | UPDATE_COMPLETE_MESSAGE,
4 | UPDATE_PENDING_MESSAGE,
5 | UPDATE_REQUEST_MESSAGE,
6 | } from "./constant";
7 | import MessageInterpreter from "./interpreter";
8 |
9 | let needToUpdate = false;
10 |
11 | export default function initReloadClient({
12 | watchPath,
13 | onUpdate,
14 | }: {
15 | watchPath: string;
16 | onUpdate: () => void;
17 | }): WebSocket {
18 | const socket = new WebSocket(LOCAL_RELOAD_SOCKET_URL);
19 |
20 | function sendUpdateCompleteMessage() {
21 | socket.send(MessageInterpreter.send({ type: UPDATE_COMPLETE_MESSAGE }));
22 | }
23 |
24 | socket.addEventListener("message", (event) => {
25 | const message = MessageInterpreter.receive(String(event.data));
26 |
27 | switch (message.type) {
28 | case UPDATE_REQUEST_MESSAGE: {
29 | if (needToUpdate) {
30 | sendUpdateCompleteMessage();
31 | needToUpdate = false;
32 | onUpdate();
33 | }
34 | return;
35 | }
36 | case UPDATE_PENDING_MESSAGE: {
37 | if (!needToUpdate) {
38 | needToUpdate = message.path.includes(watchPath);
39 | }
40 | return;
41 | }
42 | }
43 | });
44 |
45 | socket.addEventListener("close", () => {
46 | console.log("Reload server disconnected.");
47 | });
48 |
49 | return socket;
50 | }
51 |
--------------------------------------------------------------------------------
/README.zh-CN.md:
--------------------------------------------------------------------------------
1 | # DragGPT
2 |
3 | Translation Versions: [ENGLISH](./README.md) | [中文简体](./README.zh-CN.md) | [にほんご](./README.ja.md) | [한국어](./README.ko.md)
4 |
5 | 你可以轻松地拖动并点击按钮来向ChatGPT请求所选内容！
6 |
7 | 由[chrome-extension-boilerplate-react-vite](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite)制作
8 |
9 | [安装扩展程序](chrome.google.com/webstore/detail/draggpt-easy-start-with-d/akgdgnhlglhelinkmnmiakgccdkghjbh)
10 |
11 | ---
12 |
13 | ## 目录
14 |
15 | - [简介](#intro)
16 | - [功能](#features)
17 | - [安装](#installation)
18 | - [步骤](#procedures)
19 |
20 | ## 简介
21 |
22 | 此扩展程序旨在帮助用户以友好的方式在Web环境中使用ChatGPT以实现各种目的。
23 |
24 | 它使用openai API，目前，您可以通过简单的提示请求指示要执行的操作，但我们计划在未来添加一个功能来微调参数并选择模型。
25 |
26 | ## 功能
27 | - 通过拖动文本轻松调用ChatGPT
28 | - 可以通过预设提示接收所需的响应
29 | - 可以在需要时创建和使用多个提示槽
30 | - 通过扩展弹出窗口快速聊天而无需预设提示
31 | - 创建适合角色的提示生成器的功能（例如“用于SNS营销所需的短文本的提示生成器”）
32 |
33 | ### 待办事项
34 | - [x] 微调提示参数
35 | - [x] 选择文本模型（目前固定为gpt-3.5-turbo）
36 | - [ ] 图像输入/输出功能（适用于GPT-4）
37 | - [x] 添加查看对话历史记录的功能
38 |
39 | ## 安装
40 |
41 | 请前往[安装链接](https://chrome.google.com/webstore/detail/draggpt-easy-start-with-d/akgdgnhlglhelinkmnmiakgccdkghjbh)安装并使用。
42 |
43 | ### 步骤
44 |
45 | [获取openai API密钥](https://platform.openai.com/account/api-keys)
46 |
47 | ---
48 |
49 |
50 | [CONTRIBUTING](./CONTRIBUTING.md)
51 |
52 | [LICENSE](./LICENSE)
53 |
--------------------------------------------------------------------------------
/src/pages/content/src/ContentScriptApp/components/messageBox/ErrorMessageBox.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from "@testing-library/react";
2 | import ErrorMessageBox from "@pages/content/src/ContentScriptApp/components/messageBox/ErrorMessageBox";
3 | import { t } from "@src/chrome/i18n";
4 |
5 | describe("ErrorMessageBox", () => {
6 | test("에러가 없으면 알 수 없는 에러 이름과 메시지가 노출된다", async () => {
7 | // when
8 | render(
9 |
16 | );
17 |
18 | // then
19 | screen.getByText(new RegExp(t("errorMessageBox_errorTitle")));
20 | screen.getByText(t("errorMessageBox_unknownError"));
21 | });
22 | test("에러가 있으면 에러 이름과 에러 메시지가 노출된다", async () => {
23 | // given
24 | const customError = new Error();
25 | customError.name = "custom error name";
26 | customError.message = "custom error message";
27 |
28 | // when
29 | render(
30 |
38 | );
39 |
40 | // then
41 | screen.getByText(new RegExp(customError.name));
42 | screen.getByText(customError.message);
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/src/shared/hook/useBackgroundMessage.tsx:
--------------------------------------------------------------------------------
1 | import { GetDataType, sendMessageToBackgroundAsync } from "@src/chrome/message";
2 |
3 | type WrappedPromise = ReturnType;
4 |
5 | const wrappedPromiseRecord: Map = new Map();
6 |
7 | export default function useBackgroundMessage(message: M) {
8 | const messageKey = JSON.stringify(message);
9 | const wrappedPromise = wrappedPromiseRecord.get(messageKey);
10 | if (!wrappedPromise) {
11 | wrappedPromiseRecord.set(
12 | messageKey,
13 | wrapPromise(sendMessageToBackgroundAsync(message))
14 | );
15 | }
16 | return {
17 | data: wrappedPromiseRecord.get(messageKey)!.read() as GetDataType<
18 | M["type"]
19 | >,
20 | refetch: () => {
21 | wrappedPromiseRecord.delete(messageKey);
22 | },
23 | };
24 | }
25 |
26 | function wrapPromise(promise: Promise) {
27 | let status = "pending"; // 최초의 상태
28 | let result: R;
29 | const suspender = promise.then(
30 | (r) => {
31 | status = "success";
32 | result = r;
33 | },
34 | (e) => {
35 | status = "error";
36 | result = e;
37 | }
38 | );
39 |
40 | return {
41 | read() {
42 | if (status === "pending") {
43 | throw suspender;
44 | } else if (status === "error") {
45 | throw result;
46 | } else if (status === "success") {
47 | return result;
48 | }
49 | },
50 | };
51 | }
52 |
--------------------------------------------------------------------------------
/src/pages/popup/xState/popupStateMachine.typegen.ts:
--------------------------------------------------------------------------------
1 | // This file was automatically generated. Edits will be overwritten
2 |
3 | export interface Typegen0 {
4 | "@@xstate/typegen": true;
5 | internalEvents: {
6 | "done.invoke.popup-state.init:invocation[0]": {
7 | type: "done.invoke.popup-state.init:invocation[0]";
8 | data: unknown;
9 | __tip: "See the XState TS docs to learn how to strongly type this.";
10 | };
11 | "xstate.init": { type: "xstate.init" };
12 | };
13 | invokeSrcNameMap: {
14 | getApiKeyFromBackground: "done.invoke.popup-state.init:invocation[0]";
15 | saveApiKeyToBackground: "done.invoke.popup-state.checking_api_key:invocation[0]";
16 | };
17 | missingImplementations: {
18 | actions: "resetApiKeyFromBackground";
19 | delays: never;
20 | guards: never;
21 | services: "getApiKeyFromBackground" | "saveApiKeyToBackground";
22 | };
23 | eventsCausingActions: {
24 | resetApiKeyFromBackground: "RESET_API_KEY";
25 | resetOpenAiApiKey: "RESET_API_KEY";
26 | setApiKey: "CHECK_API_KEY" | "done.invoke.popup-state.init:invocation[0]";
27 | };
28 | eventsCausingDelays: {};
29 | eventsCausingGuards: {};
30 | eventsCausingServices: {
31 | getApiKeyFromBackground: "xstate.init";
32 | saveApiKeyToBackground: "CHECK_API_KEY";
33 | };
34 | matchesStates:
35 | | "checking_api_key"
36 | | "init"
37 | | "no_api_key"
38 | | "quick_chat"
39 | | "slot_list_page";
40 | tags: "noApiKeyPage";
41 | }
42 |
--------------------------------------------------------------------------------
/utils/plugins/add-hmr.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 | import { PluginOption } from "vite";
3 | import { readFileSync } from "fs";
4 |
5 | const isDev = process.env.__DEV__ === "true";
6 |
7 | const DUMMY_CODE = `export default function(){};`;
8 |
9 | function getInjectionCode(fileName: string): string {
10 | return readFileSync(
11 | path.resolve(__dirname, "..", "reload", "injections", fileName),
12 | { encoding: "utf8" }
13 | );
14 | }
15 |
16 | type Config = {
17 | background?: boolean;
18 | view?: boolean;
19 | };
20 |
21 | export default function addHmr(config?: Config): PluginOption {
22 | const { background = false, view = true } = config || {};
23 | const idInBackgroundScript = "virtual:reload-on-update-in-background-script";
24 | const idInView = "virtual:reload-on-update-in-view";
25 |
26 | const scriptHmrCode = isDev ? getInjectionCode("script.js") : DUMMY_CODE;
27 | const viewHmrCode = isDev ? getInjectionCode("view.js") : DUMMY_CODE;
28 |
29 | return {
30 | name: "add-hmr",
31 | resolveId(id) {
32 | if (id === idInBackgroundScript || id === idInView) {
33 | return getResolvedId(id);
34 | }
35 | },
36 | load(id) {
37 | if (id === getResolvedId(idInBackgroundScript)) {
38 | return background ? scriptHmrCode : DUMMY_CODE;
39 | }
40 |
41 | if (id === getResolvedId(idInView)) {
42 | return view ? viewHmrCode : DUMMY_CODE;
43 | }
44 | },
45 | };
46 | }
47 |
48 | function getResolvedId(id: string) {
49 | return "\0" + id;
50 | }
51 |
--------------------------------------------------------------------------------
/README.ja.md:
--------------------------------------------------------------------------------
1 | # DragGPT
2 |
3 | Translation Versions: [ENGLISH](./README.md) | [中文简体](./README.zh-CN.md) | [にほんご](./README.ja.md) | [한국어](./README.ko.md)
4 |
5 | ドラッグ＆クリックで選択したコンテンツをChatGPTに簡単に要求できます！
6 |
7 | [chrome-extension-boilerplate-react-vite](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite) によって作成されました。
8 |
9 | [拡張機能をインストールする](chrome.google.com/webstore/detail/draggpt-easy-start-with-d/akgdgnhlglhelinkmnmiakgccdkghjbh)
10 |
11 | ---
12 |
13 | ## 目次
14 |
15 | - [概要](#intro)
16 | - [特徴](#features)
17 | - [インストール方法](#installation)
18 | - [手順](#procedures)
19 |
20 | ## 概要
21 |
22 | この拡張プログラムは、Web環境でさまざまな目的にChatGPTを使いたいユーザーのために、親しみやすい方法でヘルプすることを目的としています。
23 |
24 | オープンAI APIを使用し、現在は簡単なプロンプトリクエストで何らかのアクションを指示できますが、将来的にはパラメータを微調整してモデルを選択する機能を追加する予定です。
25 |
26 | ## 特徴
27 | - テキストをドラッグしてChatGPTを簡単に呼び出すことができます。
28 | - 事前に設定されたプロンプトを介して所望の応答を受信できます。
29 | - 複数のプロンプトスロットを作成して、必要に応じて使用できます。
30 | - 拡張機能のポップアップウィンドウを介したプリセットプロンプトなしのクイックチャット
31 | - 役割に適したプロンプトを作成する機能（例：「SNSマーケティングに必要な短文を作成するプロンプトジェネレータ」）
32 |
33 | ### 今後の予定
34 | - [x] プロンプトパラメータの微調整
35 | - [x] テキストモデルの選択（現在はgpt-3.5-turboに固定されています）
36 | - [ ] 画像入出力機能（GPT-4用）
37 | - [x] 会話履歴の表示機能の追加
38 |
39 | ## インストール方法
40 |
41 | [インストールリンク](https://chrome.google.com/webstore/detail/draggpt-easy-start-with-d/akgdgnhlglhelinkmnmiakgccdkghjbh)にアクセスして、インストールして使用してください。
42 |
43 | ### 手順
44 |
45 | [openai APIキーを取得する](https://platform.openai.com/account/api-keys)
46 |
47 | ---
48 |
49 | [CONTRIBUTING](./CONTRIBUTING.md)
50 |
51 | [LICENSE](./LICENSE)
52 |
--------------------------------------------------------------------------------
/README.ko.md:
--------------------------------------------------------------------------------
1 | # DragGPT
2 |
3 | Translation Versions: [ENGLISH](./README.md) | [中文简体](./README.zh-CN.md) | [にほんご](./README.ja.md) | [한국어](./README.ko.md)
4 |
5 | 드래그 후 버튼 클릭만으로 간단하게 선택한 내용을 ChatGPT에게 물어보거나 요청할 수 있어요!
6 |
7 | 이 익스텐션은 [chrome-extension-boilerplate-react-vite](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite) 로 쉽고 빠르게 개발 할 수 있었습니다.
8 |
9 | [Install Extension](chrome.google.com/webstore/detail/draggpt-easy-start-with-d/akgdgnhlglhelinkmnmiakgccdkghjbh)
10 |
11 |
12 | ---
13 |
14 | ## Table of Contents
15 |
16 | - [Intro](#intro)
17 | - [Features](#features)
18 | - [Installation](#installation)
19 | - [Procedures](#procedures)
20 |
21 | ## Intro
22 |
23 | 이 확장 프로그램은 웹 환경에서 친숙하게 여러 용도로 ChatGPT를 사용하길 원하는 유저들을 돕기 위해 만들어졌습니다.
24 |
25 | openai API를 사용하고 있으며, 현재는 간단한 프롬프트 요청으로 어떤 동작을 할지 지시 할 수 있지만 추후 파라미터의 미세조정과 모델 선택 기능도 추가할 예정입니다.
26 |
27 | ## Features
28 | - 텍스트 드래그를 통해 간단하게 ChatGPT 호출
29 | - 사전 설정한 프롬프트를 통해 원하는 응답을 받을 수 있음
30 | - 여러개의 프롬프트 슬롯을 만들어두고 원할 때 선택해서 사용 가능
31 | - 익스텐션 팝업창을 통해 사전 프롬프트 없이 빠른 채팅 가능
32 | - 사전 프롬프트를 역할에 맞게 생성해주는 기능 탑재 (ex. 프롬프트 생성기에 'SNS 마케팅에 필요한 짧은 텍스트를 생성하는 프롬프트' 입력)
33 |
34 | ### TODO
35 | - [x] 프롬프트 파라미터 미세 조정
36 | - [x] 텍스트 모델 선택 (현재는 gpt-3.5-turbo 고정)
37 | - [ ] 이미지 입-출력 기능 (GPT-4 대응)
38 | - [x] 대화 내역 히스토리에서 볼 수 있는 기능 추가
39 |
40 | ## Installation
41 |
42 | [설치 링크](chrome.google.com/webstore/detail/draggpt-easy-start-with-d/akgdgnhlglhelinkmnmiakgccdkghjbh)로 이동 후 설치해서 사용
43 |
44 | ### Procedures
45 |
46 | [openai api key 발급](https://platform.openai.com/account/api-keys)
47 |
48 | ---
49 |
50 |
51 | [CONTRIBUTING](./CONTRIBUTING.md)
52 |
53 | [LICENSE](./LICENSE)
54 |
--------------------------------------------------------------------------------
/src/pages/popup/xState/slotListPageStateMachine.typegen.ts:
--------------------------------------------------------------------------------
1 | // This file was automatically generated. Edits will be overwritten
2 |
3 | export interface Typegen0 {
4 | "@@xstate/typegen": true;
5 | internalEvents: {
6 | "done.invoke.slot_list_page.init:invocation[0]": {
7 | type: "done.invoke.slot_list_page.init:invocation[0]";
8 | data: unknown;
9 | __tip: "See the XState TS docs to learn how to strongly type this.";
10 | };
11 | "xstate.init": { type: "xstate.init" };
12 | };
13 | invokeSrcNameMap: {
14 | getAllSlotsFromBackground: "done.invoke.slot_list_page.init:invocation[0]";
15 | };
16 | missingImplementations: {
17 | actions:
18 | | "addSlotMessageSendToBackground"
19 | | "deleteSlotMessageSendToBackground"
20 | | "exitPage"
21 | | "selectSlotMessageSendToBackground"
22 | | "updateSlotMessageSendToBackground";
23 | delays: never;
24 | guards: never;
25 | services: "getAllSlotsFromBackground";
26 | };
27 | eventsCausingActions: {
28 | addSlot: "ADD_SLOT";
29 | addSlotMessageSendToBackground: "ADD_SLOT";
30 | deleteSlot: "DELETE_SLOT";
31 | deleteSlotMessageSendToBackground: "DELETE_SLOT";
32 | exitPage: "CHANGE_API_KEY";
33 | selectSlot: "SELECT_SLOT";
34 | selectSlotMessageSendToBackground: "SELECT_SLOT";
35 | setSlots: "done.invoke.slot_list_page.init:invocation[0]";
36 | updateSlot: "UPDATE_SLOT";
37 | updateSlotMessageSendToBackground: "UPDATE_SLOT";
38 | };
39 | eventsCausingDelays: {};
40 | eventsCausingGuards: {};
41 | eventsCausingServices: {
42 | getAllSlotsFromBackground: "CHANGE_API_KEY" | "xstate.init";
43 | };
44 | matchesStates: "init" | "slot_detail" | "slot_list";
45 | tags: never;
46 | }
47 |
--------------------------------------------------------------------------------
/src/shared/component/ResetStyleProvider.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 |
3 | export default function ResetStyleProvider({
4 | children,
5 | }: {
6 | children: ReactNode;
7 | }) {
8 | return (
9 | <>
10 |
72 | {children}
73 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/src/pages/content/src/ContentScriptApp/emotion/ResetStyleProvider.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 |
3 | export default function ResetStyleProvider({
4 | children,
5 | }: {
6 | children: ReactNode;
7 | }) {
8 | return (
9 | <>
10 |
72 | {children}
73 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/src/pages/background/lib/infra/chatGPT.ts:
--------------------------------------------------------------------------------
1 | import { OpenAI } from "openai";
2 | import { ChatCompletionMessageParam } from "openai/resources";
3 |
4 | export async function chatGPT({
5 | input,
6 | slot,
7 | chats,
8 | apiKey,
9 | onDelta,
10 | }: {
11 | slot: ChatGPTSlot;
12 | chats?: Chat[];
13 | input?: string;
14 | apiKey: string;
15 | onDelta?: (chunk: string) => unknown;
16 | }): Promise<{ result: string }> {
17 | const messages: ChatCompletionMessageParam[] = [];
18 |
19 | if (slot.system) {
20 | messages.push({
21 | role: "system",
22 | content: slot.system,
23 | });
24 | }
25 | if (hasChats(chats)) {
26 | messages.push(...convertChatsToMessages(chats));
27 | }
28 | if (input) {
29 | messages.push({ role: "user", content: input });
30 | }
31 |
32 | const client = new OpenAI({ apiKey });
33 |
34 | const stream = client.beta.chat.completions
35 | .stream({
36 | messages,
37 | model: slot.type,
38 | max_tokens: slot.maxTokens,
39 | temperature: slot.temperature,
40 | top_p: slot.topP,
41 | frequency_penalty: slot.frequencyPenalty,
42 | presence_penalty: slot.presencePenalty,
43 | stream: true,
44 | })
45 | .on("content", (content) => {
46 | onDelta?.(content);
47 | });
48 |
49 | const result = await stream.finalChatCompletion();
50 | return { result: result.choices.at(0)?.message.content ?? "" };
51 | }
52 |
53 | function hasChats(chats?: Chat[]): chats is Chat[] {
54 | return chats !== undefined && chats.length > 0;
55 | }
56 |
57 | function convertChatsToMessages(chats: Chat[]) {
58 | return chats
59 | .filter((chat) => chat.role !== "error")
60 | .map((chat) => {
61 | return {
62 | role: chat.role === "user" ? "user" : "assistant",
63 | content: chat.content,
64 | } as const;
65 | });
66 | }
67 |
--------------------------------------------------------------------------------
/src/pages/popup/components/SlotListItem.tsx:
--------------------------------------------------------------------------------
1 | import { Box, HStack, Text } from "@chakra-ui/react";
2 | import StyledButton from "@pages/popup/components/StyledButton";
3 | import { COLORS } from "@src/constant/style";
4 | import { t } from "@src/chrome/i18n";
5 |
6 | type SlotListItemProps = {
7 | slotName: string;
8 | isSelected: boolean;
9 | onSelect: () => void;
10 | onDetail: () => void;
11 | onDelete: () => void;
12 | };
13 |
14 | export default function SlotListItem({
15 | slotName,
16 | isSelected,
17 | onDetail,
18 | onSelect,
19 | onDelete,
20 | }: SlotListItemProps) {
21 | return (
22 |
30 |
31 |
36 | {slotName}
37 |
38 |
39 | {
42 | event.stopPropagation();
43 | onDetail();
44 | }}
45 | >
46 | {t("slotListItem_editButtonText")}
47 |
48 | {
52 | event.stopPropagation();
53 | onDelete();
54 | }}
55 | >
56 | {t("slotListItem_deleteButtonText")}
57 |
58 |
59 |
60 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/src/shared/services/getGPTResponseAsStream.ts:
--------------------------------------------------------------------------------
1 | import { sendMessageToBackground } from "@src/chrome/message";
2 |
3 | export async function getQuickGPTResponseAsStream({
4 | messages,
5 | model,
6 | onDelta,
7 | onFinish,
8 | }: {
9 | messages: Chat[];
10 | model: Model;
11 | onDelta: (chunk: string) => unknown;
12 | onFinish: (result: string) => unknown;
13 | }) {
14 | return new Promise<{ cancel: () => unknown; firstChunk: string }>(
15 | (resolve, reject) => {
16 | const { disconnect } = sendMessageToBackground({
17 | message: {
18 | type: "RequestQuickChatGPTStream",
19 | input: { messages, model },
20 | },
21 | handleSuccess: (response) => {
22 | if (response.isDone || !response.chunk) {
23 | return onFinish(response.result);
24 | }
25 | resolve({ cancel: disconnect, firstChunk: response.chunk });
26 | onDelta(response.chunk);
27 | },
28 | handleError: reject,
29 | });
30 | }
31 | );
32 | }
33 |
34 | export async function getDragGPTResponseAsStream({
35 | input,
36 | onDelta,
37 | onFinish,
38 | }: {
39 | input: { chats: Chat[]; sessionId: string };
40 | onDelta: (chunk: string) => unknown;
41 | onFinish: (result: string) => unknown;
42 | }) {
43 | return new Promise<{ cancel: () => unknown; firstChunk: string }>(
44 | (resolve, reject) => {
45 | const { disconnect } = sendMessageToBackground({
46 | message: {
47 | type: "RequestDragGPTStream",
48 | input,
49 | },
50 | handleSuccess: (response) => {
51 | if (response.isDone || !response.chunk) {
52 | return onFinish(response.result);
53 | }
54 | resolve({ cancel: disconnect, firstChunk: response.chunk });
55 | onDelta(response.chunk);
56 | },
57 | handleError: reject,
58 | });
59 | }
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/src/pages/options/src/components/ChatSessionGroup.tsx:
--------------------------------------------------------------------------------
1 | import { SessionHistories } from "@pages/background/lib/storage/chatHistoryStorage";
2 | import { Menu, MenuGroup, MenuItem, Text } from "@chakra-ui/react";
3 |
4 | type ChatSessionGroupProps = {
5 | selectedSessionId?: string;
6 | onSelectSession: (sessionId: string) => unknown;
7 | chatSessions: [string, SessionHistories][];
8 | };
9 |
10 | export default function ChatSessionGroup({
11 | selectedSessionId,
12 | chatSessions,
13 | onSelectSession,
14 | }: ChatSessionGroupProps) {
15 | const dragChatHistories = chatSessions.filter(
16 | ([, chat]) => chat.type === "Drag"
17 | );
18 | const quickChatHistories = chatSessions.filter(
19 | ([, chat]) => chat.type === "Quick"
20 | );
21 |
22 | return (
23 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/utils/reload/initReloadServer.ts:
--------------------------------------------------------------------------------
1 | import { WebSocket, WebSocketServer } from "ws";
2 | import chokidar from "chokidar";
3 | import { debounce } from "./utils";
4 | import {
5 | LOCAL_RELOAD_SOCKET_PORT,
6 | LOCAL_RELOAD_SOCKET_URL,
7 | UPDATE_COMPLETE_MESSAGE,
8 | UPDATE_PENDING_MESSAGE,
9 | UPDATE_REQUEST_MESSAGE,
10 | } from "./constant";
11 | import MessageInterpreter from "./interpreter";
12 |
13 | const clientsThatNeedToUpdate: Set = new Set();
14 |
15 | function initReloadServer() {
16 | const wss = new WebSocketServer({ port: LOCAL_RELOAD_SOCKET_PORT });
17 |
18 | wss.on("listening", () =>
19 | console.log(`[HRS] Server listening at ${LOCAL_RELOAD_SOCKET_URL}`)
20 | );
21 |
22 | wss.on("connection", (ws) => {
23 | clientsThatNeedToUpdate.add(ws);
24 |
25 | ws.addEventListener("close", () => clientsThatNeedToUpdate.delete(ws));
26 | ws.addEventListener("message", (event) => {
27 | const message = MessageInterpreter.receive(String(event.data));
28 | if (message.type === UPDATE_COMPLETE_MESSAGE) {
29 | ws.close();
30 | }
31 | });
32 | });
33 | }
34 |
35 | /** CHECK:: src file was updated **/
36 | const debounceSrc = debounce(function (path: string) {
37 | // Normalize path on Windows
38 | const pathConverted = path.replace(/\\/g, "/");
39 | clientsThatNeedToUpdate.forEach((ws: WebSocket) =>
40 | ws.send(
41 | MessageInterpreter.send({
42 | type: UPDATE_PENDING_MESSAGE,
43 | path: pathConverted,
44 | })
45 | )
46 | );
47 | }, 200);
48 | chokidar.watch("src").on("all", (event, path) => debounceSrc(path));
49 |
50 | /** CHECK:: build was completed **/
51 | const debounceDist = debounce(() => {
52 | clientsThatNeedToUpdate.forEach((ws: WebSocket) => {
53 | ws.send(MessageInterpreter.send({ type: UPDATE_REQUEST_MESSAGE }));
54 | });
55 | }, 200);
56 | chokidar.watch("dist").on("all", () => debounceDist());
57 |
58 | initReloadServer();
59 |
--------------------------------------------------------------------------------
/src/shared/xState/chatStateMachine.typegen.ts:
--------------------------------------------------------------------------------
1 | // This file was automatically generated. Edits will be overwritten
2 |
3 | export interface Typegen0 {
4 | "@@xstate/typegen": true;
5 | internalEvents: {
6 | "done.invoke.chat-state.init:invocation[0]": {
7 | type: "done.invoke.chat-state.init:invocation[0]";
8 | data: unknown;
9 | __tip: "See the XState TS docs to learn how to strongly type this.";
10 | };
11 | "done.invoke.chat-state.loading:invocation[0]": {
12 | type: "done.invoke.chat-state.loading:invocation[0]";
13 | data: unknown;
14 | __tip: "See the XState TS docs to learn how to strongly type this.";
15 | };
16 | "error.platform.chat-state.loading:invocation[0]": {
17 | type: "error.platform.chat-state.loading:invocation[0]";
18 | data: unknown;
19 | };
20 | "xstate.init": { type: "xstate.init" };
21 | };
22 | invokeSrcNameMap: {
23 | getChatHistoryFromBackground: "done.invoke.chat-state.init:invocation[0]";
24 | getGPTResponse: "done.invoke.chat-state.loading:invocation[0]";
25 | };
26 | missingImplementations: {
27 | actions: "exitChatting";
28 | delays: never;
29 | guards: never;
30 | services: "getChatHistoryFromBackground" | "getGPTResponse";
31 | };
32 | eventsCausingActions: {
33 | addAssistantChat: "done.invoke.chat-state.loading:invocation[0]";
34 | addErrorChat: "error.platform.chat-state.loading:invocation[0]";
35 | addUserChat: "QUERY";
36 | exitChatting: "EXIT";
37 | resetChatData: "RESET";
38 | resetChatText: "QUERY";
39 | setChats: "done.invoke.chat-state.init:invocation[0]";
40 | updateChatText: "CHANGE_TEXT";
41 | };
42 | eventsCausingDelays: {};
43 | eventsCausingGuards: {
44 | isValidText: "QUERY";
45 | };
46 | eventsCausingServices: {
47 | getChatHistoryFromBackground: "xstate.init";
48 | getGPTResponse: "QUERY";
49 | };
50 | matchesStates: "finish" | "idle" | "init" | "loading";
51 | tags: never;
52 | }
53 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | [code-of-conduct]: CODE_OF_CONDUCT.md
2 |
3 | ## Contributing
4 |
5 | Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
6 |
7 | Please note that this project is released with a [Contributor Code of Conduct][code-of-conduct]. By participating in this project you agree to abide by its terms.
8 |
9 | ## Issues and PRs
10 |
11 | If you have suggestions for how this project could be improved, or want to report a bug, open an issue! We'd love all and any contributions. If you have questions, too, we'd love to hear them.
12 |
13 | We'd also love PRs. If you're thinking of a large PR, we advise opening up an issue first to talk about it, though! Look at the links below if you're not sure how to open a PR.
14 |
15 | ## Submitting a pull request
16 |
17 | 1. Fork and clone the repository.
18 | 1. Configure and install the dependencies: `yarn`.
19 | 1. Make sure the tests pass on your machine: `yarn test`, note: these tests also apply the linter, so there's no need to lint separately.
20 | 1. Create a new branch: `git checkout -b my-branch-name`.
21 | 1. Make your change, add tests, and make sure the tests still pass.
22 | 1. Push to your fork and submit a pull request.
23 | 1. Pat your self on the back and wait for your pull request to be reviewed and merged.
24 |
25 | Here are a few things you can do that will increase the likelihood of your pull request being accepted:
26 |
27 | - Write and update tests.
28 | - Keep your changes as focused as possible. If there are multiple changes you would like to make that are not dependent upon each other, consider submitting them as separate pull requests.
29 |
30 | Work in Progress pull requests are also welcome to get feedback early on, or if there is something blocked you.
31 |
32 | ## Resources
33 |
34 | - [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
35 | - [Using Pull Requests](https://help.github.com/articles/about-pull-requests/)
36 | - [GitHub Help](https://help.github.com)
37 |
--------------------------------------------------------------------------------
/src/shared/component/ChatCollapse.tsx:
--------------------------------------------------------------------------------
1 | import { Box, BoxProps, Collapse, StatUpArrow, VStack } from "@chakra-ui/react";
2 | import {
3 | CSSProperties,
4 | MouseEventHandler,
5 | PropsWithChildren,
6 | useState,
7 | } from "react";
8 | import styled from "@emotion/styled";
9 | import { css } from "@emotion/react";
10 | import { COLORS } from "@src/constant/style";
11 |
12 | type ChatCollapseProps = BoxProps &
13 | PropsWithChildren<{
14 | arrowColor?: CSSProperties["color"];
15 | }> &
16 | Omit;
17 |
18 | export default function ChatCollapse({
19 | children,
20 | onClick,
21 | arrowColor = "white",
22 | ...restProps
23 | }: ChatCollapseProps) {
24 | const [show, setShow] = useState(false);
25 |
26 | const closeCollapse = () => setShow(false);
27 | const openCollapse: MouseEventHandler = (event) => {
28 | setShow(true);
29 | onClick?.(event);
30 | };
31 |
32 | return (
33 |
34 |
35 | {children}
36 | {
41 | closeCollapse();
42 | e.stopPropagation();
43 | }}
44 | >
45 |
46 |
47 |
48 |
49 | );
50 | }
51 |
52 | const CollapseBox = styled(Box)<{ isShow: boolean }>`
53 | align-self: start;
54 | position: relative;
55 | ${(p) =>
56 | p.isShow ||
57 | css`
58 | cursor: pointer;
59 | &:before {
60 | content: "";
61 | position: absolute;
62 | top: 0;
63 | right: 0;
64 | left: 0;
65 | height: 100%;
66 |
67 | background-image: linear-gradient(
68 | 0deg,
69 | ${COLORS.CONTENT_BACKGROUND} 0%,
70 | rgba(0, 0, 0, 0) 100%
71 | );
72 | }
73 | `}
74 | `;
75 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # DragGPT
2 |
3 | Translation Versions: [ENGLISH](./README.md) | [中文简体](./README.zh-CN.md) | [にほんご](./README.ja.md) | [한국어](./README.ko.md)
4 |
5 | You can easily ask or request the selected content to ChatGPT by dragging and clicking the button!
6 |
7 | Made by [chrome-extension-boilerplate-react-vite](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite)
8 |
9 | [Install Extension](https://chrome.google.com/webstore/detail/akgdgnhlglhelinkmnmiakgccdkghjbh)
10 |
11 | ---
12 |
13 | ## Table of Contents
14 |
15 | - [Intro](#intro)
16 | - [Features](#features)
17 | - [Installation](#installation)
18 | - [Procedures](#procedures)
19 |
20 | ## Intro
21 |
22 | This extension program is designed to help users who want to use ChatGPT for various purposes in a friendly way in the web environment.
23 |
24 | It uses the openai API, and currently, you can instruct what action to take with a simple prompt request, but we plan to add a feature to fine-tune parameters and select models in the future.
25 |
26 | ## Features
27 | - Easily call ChatGPT by dragging text
28 | - Can receive a desired response through a pre-set prompt
29 | - Multiple prompt slots can be created and used when desired
30 | - Quick chat without a pre-set prompt through the extension pop-up window
31 | - Feature to create prompt suitable for role (e.g. 'Prompt generator to create short text required for SNS marketing')
32 |
33 | ### TODO
34 | - [x] Fine-tune prompt parameters
35 | - [x] Select text model (currently fixed to gpt-3.5-turbo)
36 | - [ ] Image input/output feature (for GPT-4)
37 | - [x] Add a feature to view conversation history
38 |
39 | ## Installation
40 |
41 | Go to the [installation link](https://chrome.google.com/webstore/detail/draggpt-easy-start-with-d/akgdgnhlglhelinkmnmiakgccdkghjbh) to install and use.
42 |
43 | ### Procedures
44 |
45 | [Get your openai API key](https://platform.openai.com/account/api-keys)
46 |
47 | ---
48 |
49 | [CONTRIBUTING](./CONTRIBUTING.md)
50 |
51 | [LICENSE](./LICENSE)
52 |
--------------------------------------------------------------------------------
/src/pages/content/src/ContentScriptApp/utils/getPositionOnScreen.test.ts:
--------------------------------------------------------------------------------
1 | import { getPositionOnScreen } from "@pages/content/src/ContentScriptApp/utils/getPositionOnScreen";
2 |
3 | declare let window: {
4 | innerWidth: number;
5 | innerHeight: number;
6 | };
7 |
8 | const originWidth = window.innerWidth;
9 | const originHeight = window.innerHeight;
10 |
11 | afterEach(() => {
12 | window.innerWidth = originWidth;
13 | window.innerHeight = originHeight;
14 | });
15 |
16 | describe("getPositionOnScreen test", () => {
17 | test("수평의 중간값이 화면의 중앙보다 위에 가깝고, 수직 중앙값이 화면의 중간보다 왼쪽에 가까우면 > 좌측 상단이다", () => {
18 | // given
19 | window.innerWidth = 1000;
20 | window.innerHeight = 1000;
21 |
22 | // when
23 | const position = getPositionOnScreen({
24 | horizontalCenter: 490,
25 | verticalCenter: 490,
26 | });
27 |
28 | // then
29 | expect(position).toEqual("topLeft");
30 | });
31 | test("수평의 중간값이 화면의 중앙보다 위에 가깝고, 수직 중앙값이 화면의 중간보다 오른쪽에 가까우면 > 우측 상단이다", () => {
32 | // given
33 | window.innerWidth = 1000;
34 | window.innerHeight = 1000;
35 |
36 | // when
37 | const position = getPositionOnScreen({
38 | horizontalCenter: 490,
39 | verticalCenter: 510,
40 | });
41 |
42 | // then
43 | expect(position).toEqual("topRight");
44 | });
45 | test("수평의 중간값이 화면의 중앙보다 아래에 가깝고, 수직 중앙값이 화면의 중간보다 왼쪽에 가까우면 > 좌측 하단이다", () => {
46 | // given
47 | window.innerWidth = 1000;
48 | window.innerHeight = 1000;
49 |
50 | // when
51 | const position = getPositionOnScreen({
52 | horizontalCenter: 510,
53 | verticalCenter: 490,
54 | });
55 |
56 | // then
57 | expect(position).toEqual("bottomLeft");
58 | });
59 | test("수평의 중간값이 화면의 중앙보다 위에 가깝고, 수직 중앙값이 화면의 중간보다 왼쪽에 가까우면 > 좌측 상단이다", () => {
60 | // given
61 | window.innerWidth = 1000;
62 | window.innerHeight = 1000;
63 |
64 | // when
65 | const position = getPositionOnScreen({
66 | horizontalCenter: 510,
67 | verticalCenter: 510,
68 | });
69 |
70 | // then
71 | expect(position).toEqual("bottomRight");
72 | });
73 | });
74 |
--------------------------------------------------------------------------------
/src/pages/background/lib/storage/slotStorage.ts:
--------------------------------------------------------------------------------
1 | import { SlotsManipulatorService } from "@pages/background/lib/service/slotsManipulatorService";
2 | import { ILocalStorage, LocalStorage } from "@src/chrome/localStorage";
3 |
4 | export class SlotStorage {
5 | private static SLOTS = "SLOTS";
6 | static storage: ILocalStorage = new LocalStorage();
7 |
8 | static async getAllSlots(): Promise {
9 | try {
10 | const slots = await this.storage.load(this.SLOTS);
11 | if (Array.isArray(slots)) {
12 | return slots as Slot[];
13 | }
14 | } catch (e) {
15 | return [];
16 | }
17 | return [];
18 | }
19 |
20 | static async setAllSlots(slots: Slot[]): Promise {
21 | await this.storage.save(this.SLOTS, slots);
22 | return slots;
23 | }
24 |
25 | static async getSelectedSlot(): Promise {
26 | const slots = await this.getAllSlots();
27 | const selectedSlot = SlotsManipulatorService.getSelectedSlot(slots);
28 | if (selectedSlot) {
29 | return selectedSlot;
30 | }
31 | const notFoundError = new Error();
32 | notFoundError.name = "Not found selected slot";
33 | notFoundError.message = "Check selected slot.";
34 | throw notFoundError;
35 | }
36 |
37 | static async addSlot(slot: Slot): Promise {
38 | const slots: Slot[] = await this.getAllSlots();
39 | const newSlot: Slot = { ...slot, isSelected: slots.length === 0 };
40 | const addedSlots = SlotsManipulatorService.addSlot(slots, newSlot);
41 | await this.storage.save(this.SLOTS, addedSlots);
42 | return addedSlots;
43 | }
44 |
45 | static async updateSlot(slot: Slot): Promise {
46 | const slots = await this.getAllSlots();
47 | const updatedSlots = SlotsManipulatorService.updateSlot(slots, slot);
48 | await this.storage.save(this.SLOTS, updatedSlots);
49 | return updatedSlots;
50 | }
51 |
52 | static async deleteSlot(slotId: string): Promise {
53 | const slots = await this.getAllSlots();
54 | const deletedSlots = SlotsManipulatorService.deleteSlot(slots, slotId);
55 | await this.storage.save(this.SLOTS, deletedSlots);
56 | return deletedSlots;
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/chrome/message.ts:
--------------------------------------------------------------------------------
1 | export type GetDataType = Exclude<
2 | Extract<
3 | Message,
4 | {
5 | type: T;
6 | data?: unknown;
7 | input?: unknown;
8 | }
9 | >["data"],
10 | undefined
11 | >;
12 |
13 | export async function sendMessageToBackgroundAsync(
14 | message: M
15 | ) {
16 | return new Promise>((resolve, reject) => {
17 | try {
18 | sendMessageToBackground({
19 | message,
20 | handleSuccess: resolve,
21 | handleError: reject,
22 | });
23 | } catch (error) {
24 | reject(error);
25 | }
26 | });
27 | }
28 |
29 | export function sendMessageToBackground({
30 | message,
31 | handleSuccess,
32 | handleError,
33 | }: {
34 | message: M;
35 | handleSuccess?: (data: GetDataType) => void;
36 | handleError?: (error: Error) => void;
37 | }) {
38 | const port = chrome.runtime.connect();
39 | port.onMessage.addListener((responseMessage: M | ErrorMessage) => {
40 | if (responseMessage.type === "Error") {
41 | handleError?.(responseMessage.error);
42 | } else {
43 | handleSuccess?.(responseMessage.data as GetDataType);
44 | }
45 | });
46 | port.onDisconnect.addListener(() => console.log("Port disconnected"));
47 | try {
48 | port.postMessage(message);
49 | } catch (error) {
50 | console.log(error);
51 | }
52 | const disconnect = () => {
53 | port.disconnect();
54 | };
55 | return { disconnect };
56 | }
57 |
58 | export function sendMessageToClient(
59 | port: chrome.runtime.Port,
60 | message: { type: Message["type"]; data: Message["data"] } | ErrorMessage
61 | ) {
62 | try {
63 | port.postMessage(message);
64 | } catch (error) {
65 | console.log(error);
66 | }
67 | }
68 |
69 | export function sendErrorMessageToClient(
70 | port: chrome.runtime.Port,
71 | error: unknown
72 | ) {
73 | const sendError = new Error();
74 | sendError.name = "Unknown Error";
75 |
76 | if (error instanceof Error) {
77 | error.name && (sendError.name = error.name);
78 | sendError.message = error.message;
79 | }
80 |
81 | sendMessageToClient(port, { type: "Error", error: sendError });
82 | }
83 |
--------------------------------------------------------------------------------
/src/pages/popup/Popup.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { NoApiKeyPage } from "@pages/popup/pages/NoApiKeyPage";
3 | import SlotListPage from "@pages/popup/pages/SlotListPage";
4 | import { useMachine } from "@xstate/react";
5 | import popupStateMachine from "@pages/popup/xState/popupStateMachine";
6 | import {
7 | sendMessageToBackground,
8 | sendMessageToBackgroundAsync,
9 | } from "@src/chrome/message";
10 | import MainLayout from "@pages/popup/components/layout/MainLayout";
11 | import QuickChattingPage from "@pages/popup/pages/QuickChattingPage";
12 |
13 | const saveApiKeyToBackground = async (apiKey: string) => {
14 | await sendMessageToBackgroundAsync({
15 | type: "SaveAPIKey",
16 | input: apiKey,
17 | });
18 | };
19 |
20 | const getApiKeyFromBackground = async () => {
21 | return sendMessageToBackgroundAsync({
22 | type: "GetAPIKey",
23 | });
24 | };
25 |
26 | const resetApiKeyFromBackground = () => {
27 | sendMessageToBackground({
28 | message: {
29 | type: "ResetAPIKey",
30 | },
31 | });
32 | };
33 |
34 | export default function Popup() {
35 | const [state, send] = useMachine(popupStateMachine, {
36 | services: {
37 | saveApiKeyToBackground: (context) => {
38 | return saveApiKeyToBackground(context.openAiApiKey ?? "");
39 | },
40 | getApiKeyFromBackground,
41 | },
42 | actions: {
43 | resetApiKeyFromBackground,
44 | },
45 | });
46 |
47 | const checkApiKey = (apiKey: string) => {
48 | send({ type: "CHECK_API_KEY", data: apiKey });
49 | };
50 |
51 | return (
52 |
53 | {state.matches("slot_list_page") && (
54 | send("RESET_API_KEY")}
56 | onClickQuickChatButton={() => send("GO_TO_QUICK_CHAT")}
57 | />
58 | )}
59 | {state.hasTag("noApiKeyPage") && (
60 |
65 | )}
66 | {state.matches("quick_chat") && (
67 | send("EXIT_QUICK_CHAT")} />
68 | )}
69 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "drag-gpt",
3 | "version": "1.5.2",
4 | "description": "Drag GPT chrome extension",
5 | "license": "MIT",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite.git"
9 | },
10 | "scripts": {
11 | "build": "tsc --noEmit && vite build",
12 | "build:watch": "__DEV__=true vite build --watch",
13 | "build:hmr": "rollup --config utils/reload/rollup.config.ts",
14 | "typegen": "xstate typegen \"src/**/*.ts?(x)\"",
15 | "wss": "node utils/reload/initReloadServer.js",
16 | "dev": "npm run build:hmr && (run-p wss build:watch)",
17 | "test": "jest",
18 | "patch": "npm version patch -m \"version %s\""
19 | },
20 | "type": "module",
21 | "dependencies": {
22 | "@chakra-ui/icons": "2.2.4",
23 | "@chakra-ui/react": "2.10.4",
24 | "@emotion/cache": "11.10.5",
25 | "@emotion/react": "11.10.6",
26 | "@emotion/styled": "11.10.6",
27 | "@xstate/react": "3.2.1",
28 | "framer-motion": "10.0.1",
29 | "react": "18.2.0",
30 | "react-dom": "18.2.0",
31 | "react-draggable": "4.4.5",
32 | "regenerator-runtime": "0.13.11",
33 | "xstate": "4.37.0"
34 | },
35 | "devDependencies": {
36 | "@rollup/plugin-typescript": "^8.5.0",
37 | "@testing-library/react": "13.4.0",
38 | "@types/chrome": "0.0.197",
39 | "@types/jest": "29.0.3",
40 | "@types/node": "18.7.23",
41 | "@types/react": "18.0.21",
42 | "@types/react-dom": "18.0.6",
43 | "@types/ws": "^8.5.3",
44 | "@typescript-eslint/eslint-plugin": "5.38.1",
45 | "@typescript-eslint/parser": "5.38.1",
46 | "@vitejs/plugin-react": "2.1.0",
47 | "@xstate/cli": "^0.4.2",
48 | "chokidar": "^3.5.3",
49 | "eslint": "8.24.0",
50 | "eslint-config-prettier": "^8.5.0",
51 | "eslint-plugin-prettier": "4.2.1",
52 | "eslint-plugin-react": "7.31.8",
53 | "fs-extra": "10.1.0",
54 | "openai": "4.55.4",
55 | "jest": "29.0.3",
56 | "jest-environment-jsdom": "29.0.3",
57 | "npm-run-all": "^4.1.5",
58 | "prettier": "2.7.1",
59 | "rollup": "2.79.1",
60 | "sass": "1.55.0",
61 | "ts-jest": "29.0.2",
62 | "ts-loader": "9.4.1",
63 | "typescript": "4.8.3",
64 | "vite": "3.2.10",
65 | "ws": "8.9.0"
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/shared/xState/streamChatStateMachine.typegen.ts:
--------------------------------------------------------------------------------
1 | // This file was automatically generated. Edits will be overwritten
2 |
3 | export interface Typegen0 {
4 | "@@xstate/typegen": true;
5 | internalEvents: {
6 | "done.invoke.stream-chat-state.init:invocation[0]": {
7 | type: "done.invoke.stream-chat-state.init:invocation[0]";
8 | data: unknown;
9 | __tip: "See the XState TS docs to learn how to strongly type this.";
10 | };
11 | "done.invoke.stream-chat-state.loading:invocation[0]": {
12 | type: "done.invoke.stream-chat-state.loading:invocation[0]";
13 | data: unknown;
14 | __tip: "See the XState TS docs to learn how to strongly type this.";
15 | };
16 | "error.platform.stream-chat-state.loading:invocation[0]": {
17 | type: "error.platform.stream-chat-state.loading:invocation[0]";
18 | data: unknown;
19 | };
20 | "xstate.init": { type: "xstate.init" };
21 | };
22 | invokeSrcNameMap: {
23 | getChatHistoryFromBackground: "done.invoke.stream-chat-state.init:invocation[0]";
24 | getGPTResponse: "done.invoke.stream-chat-state.loading:invocation[0]";
25 | };
26 | missingImplementations: {
27 | actions: "exitChatting";
28 | delays: never;
29 | guards: never;
30 | services: "getChatHistoryFromBackground" | "getGPTResponse";
31 | };
32 | eventsCausingActions: {
33 | addErrorChat: "error.platform.stream-chat-state.loading:invocation[0]";
34 | addInitialAssistantChat: "done.invoke.stream-chat-state.loading:invocation[0]";
35 | addResponseToken: "RECEIVE_ING";
36 | addUserChat: "QUERY";
37 | execCancelReceive: "RECEIVE_CANCEL";
38 | exitChatting: "EXIT";
39 | replaceLastResponse: "RECEIVE_DONE";
40 | resetChatData: "RESET";
41 | resetChatText: "QUERY";
42 | selectGptModel: "SELECT_GPT_MODEL";
43 | setCancelReceive: "done.invoke.stream-chat-state.loading:invocation[0]";
44 | setChats: "done.invoke.stream-chat-state.init:invocation[0]";
45 | updateChatText: "CHANGE_TEXT";
46 | };
47 | eventsCausingDelays: {};
48 | eventsCausingGuards: {
49 | isValidText: "QUERY";
50 | };
51 | eventsCausingServices: {
52 | getChatHistoryFromBackground: "xstate.init";
53 | getGPTResponse: "QUERY";
54 | };
55 | matchesStates: "finish" | "idle" | "init" | "loading" | "receiving";
56 | tags: never;
57 | }
58 |
--------------------------------------------------------------------------------
/src/pages/content/src/ContentScriptApp/components/GPTRequestButton.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentPropsWithRef, CSSProperties } from "react";
2 | import styled from "@emotion/styled";
3 | import { Spinner, Text, Tooltip } from "@chakra-ui/react";
4 | import { COLORS, Z_INDEX } from "@src/constant/style";
5 | import { ChatIcon } from "@chakra-ui/icons";
6 |
7 | const GAP = 4;
8 |
9 | const StyledRequestButton = styled.button`
10 | border: none;
11 | padding: 0;
12 | position: absolute;
13 | z-index: ${Z_INDEX.ROOT};
14 | width: 20px;
15 | height: 20px;
16 | background: ${COLORS.CONTENT_BACKGROUND};
17 | border-radius: 4px;
18 | display: flex;
19 | align-items: center;
20 | justify-content: center;
21 | cursor: pointer;
22 |
23 | outline: none;
24 | box-shadow: none;
25 |
26 | &:hover {
27 | border: 1px solid #ffffff;
28 | }
29 |
30 | &:active {
31 | transform: scale(0.9);
32 | transition: all ease-in-out 100ms;
33 | }
34 | `;
35 |
36 | const labelTextInlineStyle: CSSProperties = {
37 | display: "block",
38 | fontSize: "13px",
39 | lineHeight: 1,
40 | margin: 0,
41 | maxWidth: "160px",
42 | overflow: "hidden",
43 | whiteSpace: "nowrap",
44 | textOverflow: "ellipsis",
45 | fontFamily: "Noto Sans KR, sans-serif",
46 | };
47 |
48 | type GPTRequestButtonProps = {
49 | top: number;
50 | left: number;
51 | loading: boolean;
52 | selectedSlot?: Slot;
53 | } & ComponentPropsWithRef<"button">;
54 |
55 | export default function GPTRequestButton({
56 | top,
57 | left,
58 | loading,
59 | style,
60 | selectedSlot,
61 | ...restProps
62 | }: GPTRequestButtonProps) {
63 | return (
64 | {selectedSlot.name}
68 | )
69 | }
70 | >
71 |
81 | {loading ? (
82 |
83 | ) : (
84 |
85 | )}
86 |
87 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/src/pages/content/src/ContentScriptApp/xState/dragStateMachine.typegen.ts:
--------------------------------------------------------------------------------
1 | // This file was automatically generated. Edits will be overwritten
2 |
3 | export interface Typegen0 {
4 | "@@xstate/typegen": true;
5 | internalEvents: {
6 | "done.invoke.drag-state.loading:invocation[0]": {
7 | type: "done.invoke.drag-state.loading:invocation[0]";
8 | data: unknown;
9 | __tip: "See the XState TS docs to learn how to strongly type this.";
10 | };
11 | "error.platform.drag-state.loading:invocation[0]": {
12 | type: "error.platform.drag-state.loading:invocation[0]";
13 | data: unknown;
14 | };
15 | "error.platform.drag-state.on_off_check:invocation[0]": {
16 | type: "error.platform.drag-state.on_off_check:invocation[0]";
17 | data: unknown;
18 | };
19 | "xstate.init": { type: "xstate.init" };
20 | "xstate.stop": { type: "xstate.stop" };
21 | };
22 | invokeSrcNameMap: {
23 | checkOnOffState: "done.invoke.drag-state.on_off_check:invocation[0]";
24 | getGPTResponse: "done.invoke.drag-state.loading:invocation[0]";
25 | };
26 | missingImplementations: {
27 | actions: "setPositionOnScreen";
28 | delays: never;
29 | guards: never;
30 | services: "checkOnOffState" | "getGPTResponse";
31 | };
32 | eventsCausingActions: {
33 | addInitialResponseChat: "done.invoke.drag-state.loading:invocation[0]";
34 | addRequestChat: "REQUEST";
35 | addResponseChatChunk: "RECEIVE_ING";
36 | readyRequestButton: "TEXT_SELECTED";
37 | resetAll:
38 | | "CLOSE_MESSAGE_BOX"
39 | | "RECEIVE_CANCEL"
40 | | "TEXT_SELECTED"
41 | | "error.platform.drag-state.on_off_check:invocation[0]"
42 | | "xstate.init";
43 | setAnchorNodePosition: "REQUEST";
44 | setPositionOnScreen:
45 | | "done.invoke.drag-state.loading:invocation[0]"
46 | | "error.platform.drag-state.loading:invocation[0]"
47 | | "xstate.stop";
48 | };
49 | eventsCausingDelays: {};
50 | eventsCausingGuards: {
51 | isInvalidTextSelectedEvent: "TEXT_SELECTED";
52 | isValidTextSelectedEvent: "TEXT_SELECTED";
53 | };
54 | eventsCausingServices: {
55 | checkOnOffState: "TEXT_SELECTED";
56 | getGPTResponse: "REQUEST";
57 | };
58 | matchesStates:
59 | | "error_message_box"
60 | | "idle"
61 | | "loading"
62 | | "on_off_check"
63 | | "request_button"
64 | | "response_message_box"
65 | | "temp_response_message_box";
66 | tags: "showRequestButton" | "showResponseMessages";
67 | }
68 |
--------------------------------------------------------------------------------
/src/pages/background/lib/storage/quickChatHistoryStorage.test.ts:
--------------------------------------------------------------------------------
1 | import { QuickChatHistoryStorage } from "@pages/background/lib/storage/quickChatHistoryStorage";
2 |
3 | describe("QuickChatHistoryStorage test", () => {
4 | describe("getChatHistories", () => {
5 | test("채팅 데이터가 있는 경우 정상적으로 반환한다.", async () => {
6 | // given
7 | const savedChats: Chat[] = [];
8 | jest
9 | .spyOn(QuickChatHistoryStorage.storage, "load")
10 | .mockImplementationOnce(() => Promise.resolve(savedChats));
11 |
12 | // when
13 | const chats = await QuickChatHistoryStorage.getChatHistories();
14 |
15 | // then
16 | expect(chats).toEqual(savedChats);
17 | });
18 | test("채팅 데이터가 배열이 아닌 경우 빈 배열을 반환한다.", async () => {
19 | // given
20 | jest
21 | .spyOn(QuickChatHistoryStorage.storage, "load")
22 | .mockImplementationOnce(() => Promise.resolve("this is not array"));
23 |
24 | // when
25 | const chats = await QuickChatHistoryStorage.getChatHistories();
26 |
27 | // then
28 | expect(chats).toEqual([]);
29 | });
30 | test("채팅 데이터를 가져오는 과정에서 에러가 날 경우 빈 배열을 반환한다.", async () => {
31 | // given
32 | jest
33 | .spyOn(QuickChatHistoryStorage.storage, "load")
34 | .mockImplementationOnce(() => Promise.reject(Error("unknown")));
35 |
36 | // when
37 | const chats = await QuickChatHistoryStorage.getChatHistories();
38 |
39 | // then
40 | expect(chats).toEqual([]);
41 | });
42 | });
43 | test("resetChatHistories", async () => {
44 | // given
45 | const storageSaveFunction = jest
46 | .spyOn(QuickChatHistoryStorage.storage, "save")
47 | .mockImplementationOnce(() => Promise.resolve());
48 |
49 | // when
50 | await QuickChatHistoryStorage.resetChatHistories();
51 |
52 | // then
53 | expect(storageSaveFunction).toBeCalledWith("QUICK_CHAT_HISTORY", []);
54 | });
55 | test("pushChatHistories", async () => {
56 | // given
57 | const chat: Chat = {
58 | role: "user",
59 | content: "content",
60 | };
61 | jest
62 | .spyOn(QuickChatHistoryStorage, "getChatHistories")
63 | .mockImplementationOnce(() => Promise.resolve([]));
64 | const storageSaveFunction = jest
65 | .spyOn(QuickChatHistoryStorage.storage, "save")
66 | .mockImplementationOnce(() => Promise.resolve());
67 |
68 | // when
69 | await QuickChatHistoryStorage.pushChatHistories(chat);
70 |
71 | // then
72 | expect(storageSaveFunction).toBeCalledWith("QUICK_CHAT_HISTORY", [chat]);
73 | });
74 | });
75 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 | import path, { resolve } from "path";
4 | import makeManifest from "./utils/plugins/make-manifest";
5 | import customDynamicImport from "./utils/plugins/custom-dynamic-import";
6 | import addHmr from "./utils/plugins/add-hmr";
7 | import manifest from "./manifest";
8 |
9 | const root = resolve(__dirname, "src");
10 | const pagesDir = resolve(root, "pages");
11 | const assetsDir = resolve(root, "assets");
12 | const outDir = resolve(__dirname, "dist");
13 | const publicDir = resolve(__dirname, "public");
14 |
15 | const isDev = process.env.__DEV__ === "true";
16 | const isProduction = !isDev;
17 |
18 | // ENABLE HMR IN BACKGROUND SCRIPT
19 | const enableHmrInBackgroundScript = true;
20 |
21 | export default defineConfig({
22 | resolve: {
23 | alias: {
24 | "@src": root,
25 | "@assets": assetsDir,
26 | "@pages": pagesDir,
27 | },
28 | },
29 | plugins: [
30 | react(),
31 | makeManifest(manifest, { isDev }),
32 | customDynamicImport(),
33 | addHmr({ background: enableHmrInBackgroundScript, view: true }),
34 | ],
35 | publicDir,
36 | build: {
37 | outDir,
38 | /** Can slowDown build speed. */
39 | // sourcemap: !isDev,
40 | minify: isProduction,
41 | reportCompressedSize: isProduction,
42 | rollupOptions: {
43 | input: {
44 | content: resolve(pagesDir, "content", "index.ts"),
45 | background: resolve(pagesDir, "background", "index.ts"),
46 | contentStyle: resolve(pagesDir, "content", "style.scss"),
47 | popup: resolve(pagesDir, "popup", "index.html"),
48 | options: resolve(pagesDir, "options", "index.html"),
49 | },
50 | watch: {
51 | include: ["src/**", "vite.config.ts"],
52 | exclude: ["node_modules/**", "src/**/*.test.ts"],
53 | },
54 | output: {
55 | entryFileNames: "src/pages/[name]/index.js",
56 | chunkFileNames: isDev
57 | ? "assets/js/[name].js"
58 | : "assets/js/[name].[hash].js",
59 | assetFileNames: (assetInfo) => {
60 | const { dir, name: _name } = path.parse(assetInfo.name ?? "");
61 | const assetFolder = dir.split("/").at(-1);
62 | const name = assetFolder + firstUpperCase(_name);
63 | return `assets/[ext]/${name}.chunk.[ext]`;
64 | },
65 | },
66 | },
67 | },
68 | });
69 |
70 | function firstUpperCase(str: string) {
71 | const firstAlphabet = new RegExp(/( |^)[a-z]/, "g");
72 | return str.toLowerCase().replace(firstAlphabet, (L) => L.toUpperCase());
73 | }
74 |
--------------------------------------------------------------------------------
/src/pages/background/lib/storage/chatHistoryStorage.ts:
--------------------------------------------------------------------------------
1 | import { ILocalStorage, LocalStorage } from "@src/chrome/localStorage";
2 |
3 | type SessionId = string;
4 | export type SessionHistories = {
5 | history: Chat[];
6 | updatedAt: number;
7 | createdAt: number;
8 | type?: "Quick" | "Drag";
9 | };
10 | export type ChatHistories = Record;
11 |
12 | const EMPTY_CHAT_HISTORIES: ChatHistories = {};
13 |
14 | export class ChatHistoryStorage {
15 | private static CHAT_HISTORY_KEY = "CHAT_HISTORY";
16 | static storage: ILocalStorage = new LocalStorage();
17 |
18 | static async getChatHistories(): Promise {
19 | try {
20 | return (await this.storage.load(this.CHAT_HISTORY_KEY)) as ChatHistories;
21 | } catch (e) {
22 | return EMPTY_CHAT_HISTORIES;
23 | }
24 | }
25 |
26 | static async getChatHistory(sessionId: string): Promise {
27 | const chatHistories = await this.getChatHistories();
28 | return (
29 | chatHistories[sessionId] || {
30 | history: [],
31 | updatedAt: 0,
32 | createdAt: Date.now(),
33 | }
34 | );
35 | }
36 |
37 | static async resetChatHistories(): Promise {
38 | await this.storage.save(this.CHAT_HISTORY_KEY, EMPTY_CHAT_HISTORIES);
39 | }
40 |
41 | static async saveChatHistories(
42 | sessionId: string,
43 | chatOrChats: Chat | Chat[],
44 | type: "Quick" | "Drag"
45 | ): Promise {
46 | const chatHistories = await this.getChatHistories();
47 | await this.storage.save(this.CHAT_HISTORY_KEY, {
48 | ...chatHistories,
49 | [sessionId]: {
50 | type,
51 | history: chatOrChats,
52 | createdAt: Date.now(),
53 | updatedAt: Date.now(),
54 | },
55 | });
56 | }
57 |
58 | static async deleteChatHistory(sessionId: string): Promise {
59 | const chatHistories = await this.getChatHistories();
60 | delete chatHistories[sessionId];
61 | await this.storage.save(this.CHAT_HISTORY_KEY, chatHistories);
62 | }
63 |
64 | static async pushChatHistories(
65 | sessionId: string,
66 | chatOrChats: Chat | Chat[],
67 | type?: "Quick" | "Drag"
68 | ): Promise {
69 | const chatHistories = await this.getChatHistories();
70 | const sessionHistories = await this.getChatHistory(sessionId);
71 | await this.storage.save(this.CHAT_HISTORY_KEY, {
72 | ...chatHistories,
73 | [sessionId]: {
74 | ...sessionHistories,
75 | history: sessionHistories.history.concat(chatOrChats),
76 | updatedAt: Date.now(),
77 | type: type ? type : sessionHistories.type,
78 | },
79 | });
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/pages/popup/xState/popupStateMachine.ts:
--------------------------------------------------------------------------------
1 | import { assign, createMachine } from "xstate";
2 |
3 | type Events =
4 | | {
5 | type: "CHECK_API_KEY";
6 | data: string;
7 | }
8 | | {
9 | type: "RESET_API_KEY" | "GO_TO_QUICK_CHAT" | "EXIT_QUICK_CHAT";
10 | };
11 |
12 | interface Context {
13 | openAiApiKey: string | null;
14 | apiKeyCheckError?: Error;
15 | }
16 |
17 | type Services = {
18 | getApiKeyFromBackground: {
19 | data: string;
20 | };
21 | saveApiKeyToBackground: {
22 | data: void;
23 | };
24 | };
25 |
26 | const popupStateMachine = createMachine(
27 | {
28 | id: "popup-state",
29 | initial: "init",
30 | predictableActionArguments: true,
31 | schema: {
32 | context: {} as Context,
33 | events: {} as Events,
34 | services: {} as Services,
35 | },
36 | context: {
37 | openAiApiKey: null,
38 | },
39 | tsTypes: {} as import("./popupStateMachine.typegen").Typegen0,
40 | states: {
41 | init: {
42 | invoke: {
43 | src: "getApiKeyFromBackground",
44 | onDone: {
45 | target: "slot_list_page",
46 | actions: "setApiKey",
47 | },
48 | onError: {
49 | target: "no_api_key",
50 | },
51 | },
52 | },
53 | slot_list_page: {
54 | on: {
55 | RESET_API_KEY: {
56 | target: "no_api_key",
57 | actions: ["resetOpenAiApiKey", "resetApiKeyFromBackground"],
58 | },
59 | GO_TO_QUICK_CHAT: "quick_chat",
60 | },
61 | },
62 | no_api_key: {
63 | tags: "noApiKeyPage",
64 | on: {
65 | CHECK_API_KEY: {
66 | target: "checking_api_key",
67 | actions: "setApiKey",
68 | },
69 | },
70 | },
71 | quick_chat: {
72 | on: {
73 | EXIT_QUICK_CHAT: "slot_list_page",
74 | },
75 | },
76 | checking_api_key: {
77 | tags: "noApiKeyPage",
78 | invoke: {
79 | src: "saveApiKeyToBackground",
80 | onDone: { target: "slot_list_page" },
81 | onError: {
82 | target: "no_api_key",
83 | actions: assign({ apiKeyCheckError: (_, event) => event.data }),
84 | },
85 | },
86 | },
87 | },
88 | },
89 | {
90 | actions: {
91 | setApiKey: assign({
92 | openAiApiKey: (_, event) => event.data,
93 | }),
94 | resetOpenAiApiKey: assign({
95 | openAiApiKey: null,
96 | }),
97 | },
98 | }
99 | );
100 |
101 | export default popupStateMachine;
102 |
--------------------------------------------------------------------------------
/src/pages/background/lib/service/slotsManipulatorService.test.ts:
--------------------------------------------------------------------------------
1 | import { SlotsManipulatorService } from "@pages/background/lib/service/slotsManipulatorService";
2 |
3 | const defaultSlot: Slot = {
4 | id: "1",
5 | name: "name",
6 | isSelected: false,
7 | type: "gpt-4o",
8 | };
9 |
10 | describe("SlotsManipulator test", () => {
11 | test("getSelectedSlot test", () => {
12 | // given
13 | const MOCK_SELECTED_SLOT: Slot = { ...defaultSlot, isSelected: true };
14 | const MOCK_SLOTS: Slot[] = [
15 | defaultSlot,
16 | defaultSlot,
17 | defaultSlot,
18 | MOCK_SELECTED_SLOT,
19 | ];
20 |
21 | // when
22 | const foundedSlot = SlotsManipulatorService.getSelectedSlot(MOCK_SLOTS);
23 |
24 | // then
25 | expect(foundedSlot).toEqual(MOCK_SELECTED_SLOT);
26 | });
27 | describe("getSelectedSlotIndex test", () => {
28 | test("선택된 슬롯의 index를 반환한다.", () => {
29 | // given
30 | const MOCK_SELECTED_SLOT: Slot = { ...defaultSlot, isSelected: true };
31 | const MOCK_SLOTS: Slot[] = [
32 | defaultSlot,
33 | defaultSlot,
34 | defaultSlot,
35 | MOCK_SELECTED_SLOT,
36 | ];
37 |
38 | // when
39 | const selectedSlotIndex =
40 | SlotsManipulatorService.getSelectedSlotIndex(MOCK_SLOTS);
41 |
42 | // then
43 | expect(selectedSlotIndex).toEqual(3);
44 | });
45 | test("선택된 슬롯이 없으면 undefined를 반환한다", () => {
46 | // given
47 | const MOCK_SLOTS: Slot[] = [defaultSlot, defaultSlot, defaultSlot];
48 |
49 | // when
50 | const selectedSlotIndex =
51 | SlotsManipulatorService.getSelectedSlotIndex(MOCK_SLOTS);
52 |
53 | // then
54 | expect(selectedSlotIndex).toEqual(undefined);
55 | });
56 | });
57 |
58 | test("addSlot test", () => {
59 | // given
60 | const MOCK_SLOT: Slot = { ...defaultSlot };
61 | const MOCK_SLOTS: Slot[] = [];
62 |
63 | // when
64 | const slots = SlotsManipulatorService.addSlot(MOCK_SLOTS, MOCK_SLOT);
65 |
66 | // then
67 | expect(slots).toEqual(MOCK_SLOTS.concat(MOCK_SLOT));
68 | });
69 | test("updateSlot test", () => {
70 | // given
71 | const MOCK_SLOT_ID = "update";
72 | const MOCK_SLOT: Slot = {
73 | ...defaultSlot,
74 | id: MOCK_SLOT_ID,
75 | isSelected: true,
76 | };
77 | const UPDATED_SLOT: Slot = { ...MOCK_SLOT, isSelected: false };
78 | const MOCK_SLOTS: Slot[] = [
79 | defaultSlot,
80 | defaultSlot,
81 | defaultSlot,
82 | MOCK_SLOT,
83 | ];
84 |
85 | // when
86 | const updatedSlots = SlotsManipulatorService.updateSlot(
87 | MOCK_SLOTS,
88 | UPDATED_SLOT
89 | );
90 |
91 | // then
92 | const updatedSlot = updatedSlots.find(({ id }) => id === MOCK_SLOT_ID);
93 | expect(updatedSlot).toEqual(UPDATED_SLOT);
94 | });
95 | test("deleteSlot test", () => {
96 | // given
97 | const DELETED_SLOT_ID = "deleted";
98 | const MOCK_SLOTS: Slot[] = [
99 | defaultSlot,
100 | { ...defaultSlot, id: DELETED_SLOT_ID },
101 | ];
102 |
103 | // when
104 | const deletedSlots = SlotsManipulatorService.deleteSlot(
105 | MOCK_SLOTS,
106 | DELETED_SLOT_ID
107 | );
108 |
109 | // then
110 | expect(deletedSlots).toHaveLength(1);
111 | });
112 | });
113 |
--------------------------------------------------------------------------------
/src/pages/options/src/pages/Main.tsx:
--------------------------------------------------------------------------------
1 | import useBackgroundMessage from "@src/shared/hook/useBackgroundMessage";
2 | import ChatHistoryMainLayout from "@pages/options/src/components/layout/ChatHistoryMainLayout";
3 | import { Suspense, useState } from "react";
4 | import ChatHistory from "@pages/options/src/components/ChatHistory";
5 | import ChatSessionGroup from "@pages/options/src/components/ChatSessionGroup";
6 | import { sendMessageToBackgroundAsync } from "@src/chrome/message";
7 | import PleaseSelectSession from "@pages/options/src/components/PleaseSelectSession";
8 | import ConditionalRender from "@pages/options/src/components/layout/ConditionalRender";
9 | import ChatHistoryHeader from "@pages/options/src/components/ChatHistoryHeader";
10 | import ChatSessionGroupHeader from "@pages/options/src/components/ChatSessionGroupHeader";
11 | import EmptySession from "@pages/options/src/components/EmptySession";
12 | import { Spinner } from "@chakra-ui/react";
13 |
14 | export default function OptionMainPage() {
15 | const { data: chatHistories, refetch } = useBackgroundMessage({
16 | type: "GetAllChatHistory",
17 | });
18 |
19 | const hasChatHistories = Object.keys(chatHistories).length > 0;
20 | const sortedChatHistories = [
21 | ...Object.entries(chatHistories).sort(
22 | ([, a], [, b]) => a.createdAt - b.createdAt
23 | ),
24 | ];
25 |
26 | const lastUpdatedSessionId = [
27 | ...Object.entries(chatHistories).sort(
28 | ([, a], [, b]) => b.updatedAt - a.updatedAt
29 | ),
30 | ].at(0)?.[0];
31 |
32 | const [selectedSessionId, setSelectedSessionId] =
33 | useState(lastUpdatedSessionId);
34 |
35 | const onSelectSession = (sessionId: string) => {
36 | setSelectedSessionId(sessionId);
37 | };
38 |
39 | const afterDeleteSession = () => {
40 | setSelectedSessionId(undefined);
41 | refetch();
42 | };
43 |
44 | const deleteSelectedSession = async () => {
45 | if (!selectedSessionId) return;
46 | await sendMessageToBackgroundAsync({
47 | type: "DeleteChatHistorySession",
48 | input: selectedSessionId,
49 | });
50 | afterDeleteSession();
51 | };
52 |
53 | const deleteAllSession = async () => {
54 | await sendMessageToBackgroundAsync({
55 | type: "DeleteAllChatHistory",
56 | });
57 | afterDeleteSession();
58 | };
59 |
60 | return (
61 | }
66 | >
67 |
68 |
73 |
74 | }
75 | ChatHistory={
76 | }
79 | >
80 |
81 | }>
82 |
87 |
88 |
89 | }
90 | />
91 | );
92 | }
93 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, gender identity and expression, level of experience,
9 | education, socio-economic status, nationality, personal appearance, race,
10 | religion, or sexual identity and orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | - Using welcoming and inclusive language
18 | - Being respectful of differing viewpoints and experiences
19 | - Gracefully accepting constructive criticism
20 | - Focusing on what is best for the community
21 | - Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | - The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | - Trolling, insulting/derogatory comments, and personal or political attacks
28 | - Public or private harassment
29 | - Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | - Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at . All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 |
73 | [homepage]: https://www.contributor-covenant.org
74 |
--------------------------------------------------------------------------------
/src/shared/xState/chatStateMachine.ts:
--------------------------------------------------------------------------------
1 | import { assign, createMachine } from "xstate";
2 |
3 | type Events =
4 | | { type: "EXIT" | "QUERY" | "RESET" }
5 | | { type: "CHANGE_TEXT"; data: string };
6 |
7 | interface Context {
8 | inputText: string;
9 | chats: Chat[];
10 | error?: Error;
11 | }
12 |
13 | type Services = {
14 | getGPTResponse: {
15 | data: { result: string };
16 | };
17 | getChatHistoryFromBackground: {
18 | data: Chat[];
19 | };
20 | };
21 |
22 | const initialContext: Context = {
23 | inputText: "",
24 | chats: [],
25 | };
26 |
27 | const chatStateMachine = createMachine(
28 | {
29 | id: "chat-state",
30 | initial: "init",
31 | predictableActionArguments: true,
32 | context: initialContext,
33 | schema: {
34 | context: {} as Context,
35 | events: {} as Events,
36 | services: {} as Services,
37 | },
38 | tsTypes: {} as import("./chatStateMachine.typegen").Typegen0,
39 | states: {
40 | init: {
41 | invoke: {
42 | src: "getChatHistoryFromBackground",
43 | onDone: { target: "idle", actions: "setChats" },
44 | onError: { target: "idle" },
45 | },
46 | },
47 | idle: {
48 | on: {
49 | QUERY: {
50 | target: "loading",
51 | actions: ["addUserChat", "resetChatText"],
52 | cond: "isValidText",
53 | },
54 | EXIT: "finish",
55 | RESET: { actions: "resetChatData" },
56 | CHANGE_TEXT: {
57 | actions: "updateChatText",
58 | },
59 | },
60 | },
61 | loading: {
62 | invoke: {
63 | src: "getGPTResponse",
64 | onDone: { target: "idle", actions: "addAssistantChat" },
65 | onError: { target: "idle", actions: "addErrorChat" },
66 | },
67 | on: {
68 | EXIT: "finish",
69 | RESET: { actions: "resetChatData" },
70 | CHANGE_TEXT: {
71 | actions: "updateChatText",
72 | },
73 | },
74 | },
75 | finish: {
76 | type: "final",
77 | entry: "exitChatting",
78 | },
79 | },
80 | },
81 | {
82 | actions: {
83 | setChats: assign({
84 | chats: (_, event) => event.data,
85 | }),
86 | addUserChat: assign({
87 | chats: (context) =>
88 | context.chats.concat({
89 | role: "user",
90 | content: context.inputText,
91 | }),
92 | }),
93 | addAssistantChat: assign({
94 | chats: (context, event) =>
95 | context.chats.concat({
96 | role: "assistant",
97 | content: event.data.result,
98 | }),
99 | }),
100 | addErrorChat: assign({
101 | chats: (context, event) => {
102 | const error: Error = event.data as Error;
103 | return context.chats.concat({
104 | role: "error",
105 | content: `${error?.name}\n${error?.message}`,
106 | });
107 | },
108 | }),
109 | updateChatText: assign({
110 | inputText: (_, event) => event.data,
111 | }),
112 | resetChatText: assign({
113 | inputText: () => "",
114 | }),
115 | resetChatData: assign({ chats: () => [] }),
116 | },
117 | guards: {
118 | isValidText: (context) => context.inputText.length > 0,
119 | },
120 | }
121 | );
122 |
123 | export default chatStateMachine;
124 |
--------------------------------------------------------------------------------
/src/pages/popup/xState/slotListPageStateMachine.ts:
--------------------------------------------------------------------------------
1 | import { assign, createMachine } from "xstate";
2 |
3 | type Events =
4 | | {
5 | type: "EDIT_SLOT" | "SELECT_SLOT" | "DELETE_SLOT";
6 | data: string;
7 | }
8 | | {
9 | type: "ADD_SLOT" | "UPDATE_SLOT";
10 | data: Slot;
11 | }
12 | | {
13 | type: "CHANGE_API_KEY" | "BACK_TO_LIST";
14 | };
15 |
16 | interface Context {
17 | slots: Slot[];
18 | editingSlot?: Slot;
19 | }
20 |
21 | type Services = {
22 | getAllSlotsFromBackground: {
23 | data: Slot[];
24 | };
25 | };
26 |
27 | const slotListPageStateMachine = createMachine(
28 | {
29 | id: "slot_list_page",
30 | initial: "init",
31 | predictableActionArguments: true,
32 | schema: {
33 | context: {} as Context,
34 | events: {} as Events,
35 | services: {} as Services,
36 | },
37 | context: {
38 | slots: [],
39 | },
40 | tsTypes: {} as import("./slotListPageStateMachine.typegen").Typegen0,
41 | states: {
42 | init: {
43 | invoke: {
44 | src: "getAllSlotsFromBackground",
45 | onDone: {
46 | target: "slot_list",
47 | actions: "setSlots",
48 | },
49 | onError: {
50 | target: "slot_list",
51 | },
52 | },
53 | },
54 | slot_list: {
55 | on: {
56 | EDIT_SLOT: {
57 | target: "slot_detail",
58 | actions: assign({
59 | editingSlot: (context, event) =>
60 | context.slots.find((slot) => slot.id === event.data),
61 | }),
62 | },
63 | ADD_SLOT: {
64 | actions: ["addSlot", "addSlotMessageSendToBackground"],
65 | },
66 | CHANGE_API_KEY: {
67 | target: "init",
68 | actions: "exitPage",
69 | },
70 | DELETE_SLOT: {
71 | actions: ["deleteSlot", "deleteSlotMessageSendToBackground"],
72 | },
73 | SELECT_SLOT: {
74 | actions: ["selectSlot", "selectSlotMessageSendToBackground"],
75 | },
76 | },
77 | },
78 | slot_detail: {
79 | on: {
80 | BACK_TO_LIST: {
81 | target: "slot_list",
82 | actions: assign({
83 | editingSlot: () => undefined,
84 | }),
85 | },
86 | UPDATE_SLOT: {
87 | actions: ["updateSlot", "updateSlotMessageSendToBackground"],
88 | },
89 | },
90 | },
91 | },
92 | },
93 | {
94 | actions: {
95 | setSlots: assign({ slots: (_, event) => event.data }),
96 | addSlot: assign({
97 | slots: (context, event) => context.slots.concat(event.data),
98 | }),
99 | updateSlot: assign({
100 | slots: (context, event) => {
101 | return context.slots.reduce((total, slot) => {
102 | const isUpdateTargetSlot = slot.id === event.data.id;
103 | if (isUpdateTargetSlot) {
104 | return [...total, event.data];
105 | }
106 | return [...total, slot];
107 | }, []);
108 | },
109 | }),
110 | deleteSlot: assign({
111 | slots: (context, event) =>
112 | context.slots.filter((slot) => slot.id !== event.data),
113 | }),
114 | selectSlot: assign({
115 | slots: (context, event) =>
116 | context.slots.map((slot) => ({
117 | ...slot,
118 | isSelected: slot.id === event.data,
119 | })),
120 | }),
121 | },
122 | }
123 | );
124 |
125 | export default slotListPageStateMachine;
126 |
--------------------------------------------------------------------------------
/public/_locales/zh_CN/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensionName": {
3 | "message": "拖拽 GPT - 轻松开始人工智能之旅！"
4 | },
5 | "extensionDescription": {
6 | "message": "只需拖拽并点击按钮，就可以轻松向ChatGPT提问或发出请求！"
7 | },
8 | "dragGPT": {
9 | "message": "拖拽 GPT"
10 | },
11 | "noApiKeyPage_openAIApiKey_placeholder": {
12 | "message": "OpenAI API 密钥"
13 | },
14 | "noApiKeyPage_checkingApiKey": {
15 | "message": "正在检查 API 密钥...\n发送测试请求中..."
16 | },
17 | "noApiKeyPage_howToGetApiKey": {
18 | "message": "如何获取 OpenAI 的 API 密钥？"
19 | },
20 | "noApiKeyPage_howToGetApiKeyDetail1": {
21 | "message": "如果没有 OpenAI 帐号，需要进行{注册}。"
22 | },
23 | "noApiKeyPage_howToGetApiKeyDetail2": {
24 | "message": "前往{API 密钥页面}。"
25 | },
26 | "noApiKeyPage_howToGetApiKeyDetail3": {
27 | "message": "点击“创建新的密钥”按钮以生成 API 密钥。"
28 | },
29 | "noApiKeyPage_howToGetApiKeyDetail4": {
30 | "message": "复制密钥并粘贴到输入框，然后点击保存按钮即可开始使用！"
31 | },
32 | "footer_EmailText": {
33 | "message": "功能建议 / 错误报告"
34 | },
35 | "noApiKeyPage_saveButtonText": {
36 | "message": "保存"
37 | },
38 | "quickChattingPage_sendButtonText": {
39 | "message": "发送"
40 | },
41 | "quickChattingPage_stopButtonText": {
42 | "message": "停止回答"
43 | },
44 | "quickChattingPage_chattingPlaceholder": {
45 | "message": "例如：你好！"
46 | },
47 | "quickChattingPage_backButtonText": {
48 | "message": "返回"
49 | },
50 | "quickChattingPage_resetButtonText": {
51 | "message": "重置对话"
52 | },
53 | "quickChattingPage_copyButtonText_copy": {
54 | "message": "复制最后的回答"
55 | },
56 | "quickChattingPage_copyButtonText_copied": {
57 | "message": "已复制！"
58 | },
59 | "slotListPage_newSlotButtonText": {
60 | "message": "添加插槽"
61 | },
62 | "slogListPage_showChatHistoryButtonText": {
63 | "message": "대화 기록 보기"
64 | },
65 | "slotListPage_quickChatButtonText": {
66 | "message": "快速对话"
67 | },
68 | "slotListPage_resetApiKeyButtonText": {
69 | "message": "重置 API 密钥"
70 | },
71 | "slotListPage_promptSlotsTitle": {
72 | "message": "提示插槽"
73 | },
74 | "slotListPage_resetApiKeyConfirmMessage": {
75 | "message": "确定要重置 API 密钥吗？"
76 | },
77 | "slotListItem_deleteButtonText": {
78 | "message": "删除"
79 | },
80 | "slotListItem_editButtonText": {
81 | "message": "编辑"
82 | },
83 | "slotDetail_promptSlotName": {
84 | "message": "提示插槽名称"
85 | },
86 | "slotDetail_promptSlotName_placeholder": {
87 | "message": "例如：用于英译汉"
88 | },
89 | "slotDetail_writePromptTitle": {
90 | "message": "请填写用于ChatGPT请求的预设提示内容（最多2000个字符）"
91 | },
92 | "slotDetail_promptInputPlaceholder": {
93 | "message": "例如：告诉我英语句子或单词的中文意思"
94 | },
95 | "slotDetail_temperatureTitle": {
96 | "message": "随机性（温度：0~2）"
97 | },
98 | "slotDetail_isGpt4Turbo": {
99 | "message": "使用 GPT4Turbo（默认值：gpt4o）"
100 | },
101 | "slotDetail_saveButtonText": {
102 | "message": "保存"
103 | },
104 | "slotDetail_cancelButtonText": {
105 | "message": "取消"
106 | },
107 | "responseMessageBox_responseTitle": {
108 | "message": "回答"
109 | },
110 | "responseMessageBox_copyButtonText_copy": {
111 | "message": "复制最后的回答"
112 | },
113 | "responseMessageBox_copyButtonText_copied": {
114 | "message": "已复制！"
115 | },
116 | "responseMessageBox_sendButtonText": {
117 | "message": "发送"
118 | },
119 | "responseMessageBox_stopButtonText": {
120 | "message": "停止回答"
121 | },
122 | "responseMessageBox_messageInputPlacepolder": {
123 | "message": "例如：将上述内容简单总结一下"
124 | },
125 | "errorMessageBox_errorTitle": {
126 | "message": "错误"
127 | },
128 | "errorMessageBox_unknownError": {
129 | "message": "未知错误"
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/public/_locales/ja/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensionName": {
3 | "message": "ドラッグGPT - 簡単にAIを始めてみよう！"
4 | },
5 | "extensionDescription": {
6 | "message": "ドラッグしてボタンをクリックするだけで、簡単に選択した内容をChatGPTに質問したり要求したりすることができます！"
7 | },
8 | "dragGPT": {
9 | "message": "ドラッグGPT"
10 | },
11 | "noApiKeyPage_openAIApiKey_placeholder": {
12 | "message": "OpenAI APIキー"
13 | },
14 | "noApiKeyPage_checkingApiKey": {
15 | "message": "APIキーを確認するために\nテストリクエストを送信中..."
16 | },
17 | "noApiKeyPage_howToGetApiKey": {
18 | "message": "OpenAIのAPIキーの取得方法は？"
19 | },
20 | "noApiKeyPage_howToGetApiKeyDetail1": {
21 | "message": "OpenAIアカウントがない場合、{登録}が必要です。"
22 | },
23 | "noApiKeyPage_howToGetApiKeyDetail2": {
24 | "message": "{APIキーページ}に移動してください。"
25 | },
26 | "noApiKeyPage_howToGetApiKeyDetail3": {
27 | "message": "APIキーの作成には、新しいシークレットキーを作成するボタンをクリックしてください。"
28 | },
29 | "noApiKeyPage_howToGetApiKeyDetail4": {
30 | "message": "キーをコピーして入力し、保存ボタンをクリックすると、開始できます！"
31 | },
32 | "footer_EmailText": {
33 | "message": "機能の提案/バグの報告"
34 | },
35 | "noApiKeyPage_saveButtonText": {
36 | "message": "保存"
37 | },
38 | "quickChattingPage_sendButtonText": {
39 | "message": "送信"
40 | },
41 | "quickChattingPage_stopButtonText": {
42 | "message": "回答停止"
43 | },
44 | "quickChattingPage_chattingPlaceholder": {
45 | "message": "例：こんにちは！"
46 | },
47 | "quickChattingPage_backButtonText": {
48 | "message": "戻る"
49 | },
50 | "quickChattingPage_resetButtonText": {
51 | "message": "会話のリセット"
52 | },
53 | "quickChattingPage_copyButtonText_copy": {
54 | "message": "最後の応答のコピー"
55 | },
56 | "quickChattingPage_copyButtonText_copied": {
57 | "message": "コピー済み！"
58 | },
59 | "slotListPage_newSlotButtonText": {
60 | "message": "スロットを追加"
61 | },
62 | "slogListPage_showChatHistoryButtonText": {
63 | "message": "대화 기록 보기"
64 | },
65 | "slotListPage_quickChatButtonText": {
66 | "message": "クイックチャット"
67 | },
68 | "slotListPage_resetApiKeyButtonText": {
69 | "message": "APIキーのリセット"
70 | },
71 | "slotListPage_promptSlotsTitle": {
72 | "message": "プロンプトスロット"
73 | },
74 | "slotListPage_resetApiKeyConfirmMessage": {
75 | "message": "本当にAPIキーをリセットしますか？"
76 | },
77 | "slotListItem_deleteButtonText": {
78 | "message": "削除"
79 | },
80 | "slotListItem_editButtonText": {
81 | "message": "編集"
82 | },
83 | "slotDetail_promptSlotName": {
84 | "message": "プロンプトスロット名"
85 | },
86 | "slotDetail_promptSlotName_placeholder": {
87 | "message": "例：英語から日本語への翻訳用"
88 | },
89 | "slotDetail_writePromptTitle": {
90 | "message": "ChatGPTの要求に使用するプロンプトを作成してください（最大2000文字）"
91 | },
92 | "slotDetail_promptInputPlaceholder": {
93 | "message": "例：英文または単語の日本語訳を教えてください"
94 | },
95 | "slotDetail_temperatureTitle": {
96 | "message": "ランダム性（temperature：0～2）"
97 | },
98 | "slotDetail_isGpt4Turbo": {
99 | "message": "gpt4Turboの使用（デフォルト：gpt4o）"
100 | },
101 | "slotDetail_saveButtonText": {
102 | "message": "保存"
103 | },
104 | "slotDetail_cancelButtonText": {
105 | "message": "キャンセル"
106 | },
107 | "responseMessageBox_responseTitle": {
108 | "message": "回答"
109 | },
110 | "responseMessageBox_copyButtonText_copy": {
111 | "message": "最後の応答のコピー"
112 | },
113 | "responseMessageBox_copyButtonText_copied": {
114 | "message": "コピー済み！"
115 | },
116 | "responseMessageBox_sendButtonText": {
117 | "message": "送信"
118 | },
119 | "responseMessageBox_stopButtonText": {
120 | "message": "回答停止"
121 | },
122 | "responseMessageBox_messageInputPlacepolder": {
123 | "message": "例：上記の内容を簡潔に要約してください"
124 | },
125 | "errorMessageBox_errorTitle": {
126 | "message": "エラー"
127 | },
128 | "errorMessageBox_unknownError": {
129 | "message": "未知のエラー"
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/public/_locales/ko/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensionName": {
3 | "message": "드래그 GPT - 드래그로 쉽게 AI를 시작해보세요!"
4 | },
5 | "extensionDescription": {
6 | "message": "드래그 후 버튼 클릭만으로 간단하게 선택한 내용을 ChatGPT에게 물어보거나 요청할 수 있어요!"
7 | },
8 | "dragGPT": {
9 | "message": "드래그 GPT"
10 | },
11 | "noApiKeyPage_openAIApiKey_placeholder": {
12 | "message": "OpenAI API 키"
13 | },
14 | "noApiKeyPage_checkingApiKey": {
15 | "message": "API 키 확인을 위해\n테스트 요청을 날려보는 중..."
16 | },
17 | "noApiKeyPage_howToGetApiKey": {
18 | "message": "OpenAI의 API 키는 어떻게 얻나요?"
19 | },
20 | "noApiKeyPage_howToGetApiKeyDetail1": {
21 | "message": "OpenAI 계정이 없다면 {회원가입}이 필요합니다."
22 | },
23 | "noApiKeyPage_howToGetApiKeyDetail2": {
24 | "message": "{API Key 페이지}로 이동하세요."
25 | },
26 | "noApiKeyPage_howToGetApiKeyDetail3": {
27 | "message": "API key 생성을 위해 Create a new secret key 버튼을 눌러주세요."
28 | },
29 | "noApiKeyPage_howToGetApiKeyDetail4": {
30 | "message": "키를 복사하고 입력 후 저장 버튼을 누르면 시작할 수 있습니다!"
31 | },
32 | "footer_EmailText": {
33 | "message": "기능 제안 / 버그 제보"
34 | },
35 | "noApiKeyPage_saveButtonText": {
36 | "message": "저장"
37 | },
38 | "quickChattingPage_sendButtonText": {
39 | "message": "전송"
40 | },
41 | "quickChattingPage_stopButtonText": {
42 | "message": "답변 중단"
43 | },
44 | "quickChattingPage_chattingPlaceholder": {
45 | "message": "ex. 안녕!"
46 | },
47 | "quickChattingPage_backButtonText": {
48 | "message": "뒤로가기"
49 | },
50 | "quickChattingPage_resetButtonText": {
51 | "message": "대화 초기화"
52 | },
53 | "quickChattingPage_copyButtonText_copy": {
54 | "message": "마지막 응답 복사"
55 | },
56 | "quickChattingPage_copyButtonText_copied": {
57 | "message": "복사됨!"
58 | },
59 | "slotListPage_newSlotButtonText": {
60 | "message": "슬롯 추가"
61 | },
62 | "slogListPage_showChatHistoryButtonText": {
63 | "message": "대화 기록 보기"
64 | },
65 | "slotListPage_quickChatButtonText": {
66 | "message": "빠른 대화"
67 | },
68 | "slotListPage_resetApiKeyButtonText": {
69 | "message": "API키 초기화"
70 | },
71 | "slotListPage_promptSlotsTitle": {
72 | "message": "프롬프트 슬롯"
73 | },
74 | "slotListPage_resetApiKeyConfirmMessage": {
75 | "message": "정말 API 키를 초기화 하시겠어요?"
76 | },
77 | "slotListItem_deleteButtonText": {
78 | "message": "삭제"
79 | },
80 | "slotListItem_editButtonText": {
81 | "message": "수정"
82 | },
83 | "slotDetail_promptSlotName": {
84 | "message": "프롬프트 슬롯 이름"
85 | },
86 | "slotDetail_promptSlotName_placeholder": {
87 | "message": "ex. 영-한 번역용"
88 | },
89 | "slotDetail_writePromptTitle": {
90 | "message": "ChatGPT 요청에 사용할 사전 프롬프트를\n작성해주세요.(최대 2000자)"
91 | },
92 | "slotDetail_promptInputPlaceholder": {
93 | "message": "ex. 영어 문장 혹은 단어의 한국어 뜻을 알려줘."
94 | },
95 | "slotDetail_temperatureTitle": {
96 | "message": "무작위성 (temperature: 0~2)"
97 | },
98 | "slotDetail_isGpt4Turbo": {
99 | "message": "GPT4Turbo 사용 (기본값: gpt4o)"
100 | },
101 | "slotDetail_saveButtonText": {
102 | "message": "저장"
103 | },
104 | "slotDetail_cancelButtonText": {
105 | "message": "취소"
106 | },
107 | "responseMessageBox_responseTitle": {
108 | "message": "답변"
109 | },
110 | "responseMessageBox_copyButtonText_copy": {
111 | "message": "마지막 응답 복사"
112 | },
113 | "responseMessageBox_copyButtonText_copied": {
114 | "message": "복사됨!"
115 | },
116 | "responseMessageBox_sendButtonText": {
117 | "message": "전송"
118 | },
119 | "responseMessageBox_stopButtonText": {
120 | "message": "답변 중단"
121 | },
122 | "responseMessageBox_messageInputPlacepolder": {
123 | "message": "ex. 위 내용을 알기 쉽게 요약해줘"
124 | },
125 | "errorMessageBox_errorTitle": {
126 | "message": "에러"
127 | },
128 | "errorMessageBox_unknownError": {
129 | "message": "알 수 없는 에러"
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/src/pages/popup/pages/NoApiKeyPage.tsx:
--------------------------------------------------------------------------------
1 | import React, { ChangeEventHandler, useState } from "react";
2 | import {
3 | Button,
4 | HStack,
5 | Input,
6 | Link,
7 | OrderedList,
8 | Spinner,
9 | Text,
10 | VStack,
11 | } from "@chakra-ui/react";
12 | import Footer from "@pages/popup/components/layout/Footer";
13 | import StyledButton from "@pages/popup/components/StyledButton";
14 | import { COLORS } from "@src/constant/style";
15 | import { t } from "@src/chrome/i18n";
16 |
17 | type NoApiKeyPageProps = {
18 | checkApiKey: (key: string) => void;
19 | apiKeyError?: Error;
20 | loading: boolean;
21 | };
22 | export const NoApiKeyPage = ({
23 | loading,
24 | checkApiKey,
25 | apiKeyError,
26 | }: NoApiKeyPageProps) => {
27 | const [apiKey, setApiKey] = useState("");
28 |
29 | const handleChange: ChangeEventHandler = (event) => {
30 | setApiKey(event.target.value);
31 | };
32 |
33 | const onClickSaveButton = () => {
34 | checkApiKey(apiKey);
35 | };
36 |
37 | return (
38 | <>
39 |
40 | {loading ? (
41 |
42 |
43 |
44 | {t("noApiKeyPage_checkingApiKey")}
45 |
46 |
47 | ) : (
48 | <>
49 |
50 |
59 |
60 | {t("noApiKeyPage_saveButtonText")}
61 |
62 |
63 |
64 |
71 | {t("noApiKeyPage_howToGetApiKey")}
72 |
73 |
81 |
82 | {separateI18nAndAddLink(
83 | t("noApiKeyPage_howToGetApiKeyDetail1"),
84 | "https://platform.openai.com/signup"
85 | )}
86 |
87 |
88 | {separateI18nAndAddLink(
89 | t("noApiKeyPage_howToGetApiKeyDetail2"),
90 | "https://platform.openai.com/account/api-keys"
91 | )}
92 |
93 | {t("noApiKeyPage_howToGetApiKeyDetail3")}
94 | {t("noApiKeyPage_howToGetApiKeyDetail4")}
95 |
96 |
97 | )}
98 | {apiKeyError && (
99 |
100 |
101 | {apiKeyError.name}
102 |
103 |
104 | {apiKeyError.message}
105 |
106 |
107 | )}
108 |
109 |
110 |
111 | );
112 | };
113 |
114 | const separateI18nAndAddLink = (text: string, link: string) => {
115 | const [prev, rest] = text.split("{");
116 | const [linkText, next] = rest.split("}");
117 | return (
118 | <>
119 | {prev}
120 |
121 | {linkText}
122 |
123 | {next}
124 |
125 | );
126 | };
127 |
--------------------------------------------------------------------------------
/public/_locales/en/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "extensionName": {
3 | "message": "Drag GPT - Start AI Easily with Drag!"
4 | },
5 | "extensionDescription": {
6 | "message": "Easily ask questions or make requests to ChatGPT by simply dragging and clicking!"
7 | },
8 | "dragGPT": {
9 | "message": "Drag GPT"
10 | },
11 | "noApiKeyPage_openAIApiKey_placeholder": {
12 | "message": "OpenAI API Key"
13 | },
14 | "noApiKeyPage_checkingApiKey": {
15 | "message": "Checking API Key...\nSending test request..."
16 | },
17 | "noApiKeyPage_howToGetApiKey": {
18 | "message": "How to Get OpenAI API Key?"
19 | },
20 | "noApiKeyPage_howToGetApiKeyDetail1": {
21 | "message": "If you don't have an OpenAI account, you need to {sign up}."
22 | },
23 | "noApiKeyPage_howToGetApiKeyDetail2": {
24 | "message": "Go to the {API Key page}."
25 | },
26 | "noApiKeyPage_howToGetApiKeyDetail3": {
27 | "message": "Click on the Create a new secret key button to generate an API key."
28 | },
29 | "noApiKeyPage_howToGetApiKeyDetail4": {
30 | "message": "Copy the key, enter it, and click the Save button to get started!"
31 | },
32 | "footer_EmailText": {
33 | "message": "Feature Suggestions / Bug Reports"
34 | },
35 | "noApiKeyPage_saveButtonText": {
36 | "message": "Save"
37 | },
38 | "quickChattingPage_sendButtonText": {
39 | "message": "Send"
40 | },
41 | "quickChattingPage_stopButtonText": {
42 | "message": "Stop"
43 | },
44 | "quickChattingPage_chattingPlaceholder": {
45 | "message": "e.g. Hello!"
46 | },
47 | "quickChattingPage_backButtonText": {
48 | "message": "Back"
49 | },
50 | "quickChattingPage_resetButtonText": {
51 | "message": "Reset Conversation"
52 | },
53 | "quickChattingPage_copyButtonText_copy": {
54 | "message": "Copy Last Response"
55 | },
56 | "quickChattingPage_copyButtonText_copied": {
57 | "message": "Copied!"
58 | },
59 | "slotListPage_newSlotButtonText": {
60 | "message": "Add Slot"
61 | },
62 | "slogListPage_showChatHistoryButtonText": {
63 | "message": "History"
64 | },
65 | "slotListPage_quickChatButtonText": {
66 | "message": "Quick Chat"
67 | },
68 | "slotListPage_resetApiKeyButtonText": {
69 | "message": "Reset API Key"
70 | },
71 | "slotListPage_promptSlotsTitle": {
72 | "message": "Prompt Slots"
73 | },
74 | "slotListPage_resetApiKeyConfirmMessage": {
75 | "message": "Are you sure you want to reset the API key?"
76 | },
77 | "slotListItem_deleteButtonText": {
78 | "message": "Delete"
79 | },
80 | "slotListItem_editButtonText": {
81 | "message": "Edit"
82 | },
83 | "slotDetail_promptSlotName": {
84 | "message": "Prompt Slot Name"
85 | },
86 | "slotDetail_promptSlotName_placeholder": {
87 | "message": "e.g. English to Korean Translation"
88 | },
89 | "slotDetail_writePromptTitle": {
90 | "message": "Please write the pre-defined prompt for ChatGPT requests (up to 2000 characters)"
91 | },
92 | "slotDetail_promptInputPlaceholder": {
93 | "message": "e.g. Tell me the Korean meaning of an English sentence or word."
94 | },
95 | "slotDetail_temperatureTitle": {
96 | "message": "Randomness (temperature: 0~2)"
97 | },
98 | "slotDetail_isGpt4Turbo": {
99 | "message": "Use gpt4-turbo (default: gpt4o)"
100 | },
101 | "slotDetail_saveButtonText": {
102 | "message": "Save"
103 | },
104 | "slotDetail_cancelButtonText": {
105 | "message": "Cancel"
106 | },
107 | "responseMessageBox_responseTitle": {
108 | "message": "Response"
109 | },
110 | "responseMessageBox_copyButtonText_copy": {
111 | "message": "Copy Last Response"
112 | },
113 | "responseMessageBox_copyButtonText_copied": {
114 | "message": "Copied!"
115 | },
116 | "responseMessageBox_sendButtonText": {
117 | "message": "Send"
118 | },
119 | "responseMessageBox_stopButtonText": {
120 | "message": "Stop"
121 | },
122 | "responseMessageBox_messageInputPlacepolder": {
123 | "message": "e.g. Summarize the above content for me."
124 | },
125 | "errorMessageBox_errorTitle": {
126 | "message": "Error"
127 | },
128 | "errorMessageBox_unknownError": {
129 | "message": "Unknown Error"
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/src/pages/content/src/ContentScriptApp/components/messageBox/MessageBox.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ComponentPropsWithRef,
3 | ReactNode,
4 | useEffect,
5 | useMemo,
6 | useRef,
7 | } from "react";
8 | import styled from "@emotion/styled";
9 | import { CloseButton, HStack, Stack, Text } from "@chakra-ui/react";
10 | import type { PositionOnScreen } from "@pages/content/src/ContentScriptApp/utils/getPositionOnScreen";
11 | import useRootOutsideClick from "@pages/content/src/ContentScriptApp/hooks/useRootOutsideClick";
12 | import getSafePixel from "@pages/content/src/ContentScriptApp/utils/getSafePixel";
13 | import { COLORS, Z_INDEX } from "@src/constant/style";
14 | import DraggableBox from "@pages/content/src/ContentScriptApp/components/DraggableBox";
15 |
16 | const GAP = 8;
17 |
18 | const MessageBoxContainer = styled.div<{ width: number }>`
19 | background: ${COLORS.CONTENT_BACKGROUND};
20 | display: flex;
21 | flex-direction: column;
22 | position: absolute;
23 | z-index: ${Z_INDEX.ROOT};
24 |
25 | white-space: pre-wrap;
26 |
27 | width: ${(p) => p.width}px;
28 | min-width: ${(p) => p.width}px;
29 | max-width: ${(p) => p.width}px;
30 |
31 | border-radius: 6px;
32 | padding: 12px;
33 | font-size: 14px;
34 | line-height: 16px;
35 | p {
36 | margin: 0;
37 | }
38 | `;
39 |
40 | const StyledCloseButton = styled(CloseButton)`
41 | cursor: pointer;
42 | margin: 0;
43 | background: transparent;
44 | border: none;
45 | outline: none;
46 | padding: 6px;
47 | border-radius: 4px;
48 |
49 | &:active {
50 | outline: none;
51 | transform: scale(0.9);
52 | transition: all ease-in-out 100ms;
53 | }
54 | `;
55 |
56 | export type MessageBoxProps = {
57 | isOutsideClickDisabled?: boolean;
58 | anchorTop: number;
59 | anchorCenter: number;
60 | anchorBottom: number;
61 | header: ReactNode;
62 | content: ReactNode;
63 | footer?: ReactNode;
64 | width: number;
65 | onClose: () => void;
66 | positionOnScreen: PositionOnScreen;
67 | } & ComponentPropsWithRef<"div">;
68 |
69 | export default function MessageBox({
70 | anchorCenter,
71 | anchorTop,
72 | anchorBottom,
73 | header,
74 | width,
75 | content,
76 | onClose,
77 | positionOnScreen,
78 | footer,
79 | isOutsideClickDisabled,
80 | ...restProps
81 | }: MessageBoxProps) {
82 | const containerRef = useRef(null);
83 |
84 | useRootOutsideClick({
85 | ref: containerRef,
86 | isDisabled: isOutsideClickDisabled,
87 | handler: onClose,
88 | });
89 |
90 | useEffect(() => {
91 | if (!containerRef.current) {
92 | return;
93 | }
94 | const boxCenterPosition = anchorCenter - width / 2;
95 | const height = containerRef.current.getBoundingClientRect().height;
96 |
97 | switch (positionOnScreen) {
98 | case "topLeft":
99 | case "topRight": {
100 | containerRef.current.style.top = getSafePixel(anchorBottom + GAP);
101 | containerRef.current.style.left = getSafePixel(boxCenterPosition);
102 | return;
103 | }
104 | case "bottomLeft":
105 | case "bottomRight": {
106 | containerRef.current.style.top = getSafePixel(anchorTop - GAP - height);
107 | containerRef.current.style.left = getSafePixel(boxCenterPosition);
108 | return;
109 | }
110 | }
111 | }, [containerRef, anchorCenter, anchorBottom, anchorTop, positionOnScreen]);
112 |
113 | // TODO withDraggableBox 등으로 로직 추출
114 | const containerRefRect = useMemo(() => {
115 | return containerRef.current?.getBoundingClientRect();
116 | }, [containerRef.current]);
117 |
118 | return (
119 |
123 |
124 |
125 |
126 | {typeof header === "string" ? (
127 |
128 | {header}
129 |
130 | ) : (
131 | header
132 | )}
133 |
134 |
135 |
136 | {typeof content === "string" ? (
137 | {content}
138 | ) : (
139 | content
140 | )}
141 |
142 | {footer}
143 |
144 |
145 |
146 | );
147 | }
148 |
--------------------------------------------------------------------------------
/src/pages/options/src/components/ChatHistory.tsx:
--------------------------------------------------------------------------------
1 | import { Button, HStack, Input, StackProps, VStack } from "@chakra-ui/react";
2 | import { ChatBox } from "@pages/content/src/ContentScriptApp/components/messageBox/ResponseMessageBox";
3 | import { useMachine } from "@xstate/react";
4 | import streamChatStateMachine from "@src/shared/xState/streamChatStateMachine";
5 | import { sendMessageToBackgroundAsync } from "@src/chrome/message";
6 | import { getDragGPTResponseAsStream } from "@src/shared/services/getGPTResponseAsStream";
7 | import { t } from "@src/chrome/i18n";
8 | import { useCopyClipboard } from "@src/shared/hook/useCopyClipboard";
9 | import useBackgroundMessage from "@src/shared/hook/useBackgroundMessage";
10 | import { useEffect } from "react";
11 | import { useScrollDownEffect } from "@src/shared/hook/useScrollDownEffect";
12 |
13 | type ChatHistoryProps = {
14 | sessionId: string;
15 | } & StackProps;
16 |
17 | export default function ChatHistory({
18 | sessionId,
19 | ...restProps
20 | }: ChatHistoryProps) {
21 | const { data, refetch } = useBackgroundMessage({
22 | type: "GetChatSessionHistory",
23 | input: sessionId,
24 | });
25 | const chats = data.history;
26 |
27 | useEffect(() => {
28 | refetch();
29 | }, [sessionId]);
30 |
31 | return (
32 |
38 | );
39 | }
40 |
41 | function findLastResponseChat(chats: Chat[]) {
42 | return chats.filter((chat) => chat.role === "assistant").at(-1);
43 | }
44 |
45 | type ChatHistoryWithInitialChatDataProps = {
46 | chats: Chat[];
47 | } & ChatHistoryProps;
48 |
49 | function ChatHistoryWithInitialChatData({
50 | sessionId,
51 | chats,
52 | ...restProps
53 | }: ChatHistoryWithInitialChatDataProps) {
54 | const [state, send] = useMachine(streamChatStateMachine, {
55 | services: {
56 | getChatHistoryFromBackground: () => Promise.resolve(chats),
57 | getGPTResponse: (context) => {
58 | void sendMessageToBackgroundAsync({
59 | type: "PushChatHistory",
60 | input: { sessionId, chats: context.chats.at(-1) as Chat },
61 | });
62 | return getDragGPTResponseAsStream({
63 | input: { chats: context.chats, sessionId },
64 | onDelta: (chunk) => send("RECEIVE_ING", { data: chunk }),
65 | onFinish: (result) => {
66 | send("RECEIVE_DONE", { data: result });
67 | void sendMessageToBackgroundAsync({
68 | type: "PushChatHistory",
69 | input: {
70 | sessionId,
71 | chats: { role: "assistant", content: result },
72 | },
73 | });
74 | },
75 | });
76 | },
77 | },
78 | actions: {
79 | exitChatting: () => undefined,
80 | },
81 | });
82 | const isLoading = state.matches("loading");
83 | const isReceiving = state.matches("receiving");
84 |
85 | const { isCopied, copy } = useCopyClipboard([
86 | chats.filter(({ role }) => role === "assistant").length,
87 | ]);
88 |
89 | const onClickCopy = async () => {
90 | const lastResponseText = findLastResponseChat(chats);
91 | if (lastResponseText) {
92 | await copy(lastResponseText.content);
93 | }
94 | };
95 |
96 | const { scrollDownRef } = useScrollDownEffect([
97 | state.context.chats.at(-1)?.content,
98 | ]);
99 |
100 | return (
101 | <>
102 |
103 | {state.context.chats.map((chat, index) => (
104 |
105 | ))}
106 |
107 |
108 | {
112 | event.preventDefault();
113 | send({ type: "QUERY" });
114 | }}
115 | >
116 |
123 | send({ type: "CHANGE_TEXT", data: e.target.value })
124 | }
125 | onKeyDown={(e) => e.stopPropagation()}
126 | />
127 |
128 |
131 |
132 |
133 |
138 | {isReceiving && (
139 |
146 | )}
147 |
148 |
149 |
150 | );
151 | }
152 |
--------------------------------------------------------------------------------
/src/pages/popup/components/SlotDetail.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Box,
3 | Button,
4 | ButtonProps,
5 | HStack,
6 | Input,
7 | Menu,
8 | MenuButton,
9 | MenuItem,
10 | MenuList,
11 | Slider,
12 | SliderFilledTrack,
13 | SliderThumb,
14 | SliderTrack,
15 | Text,
16 | Textarea,
17 | Tooltip,
18 | VStack,
19 | } from "@chakra-ui/react";
20 | import { forwardRef, ForwardRefRenderFunction, useState } from "react";
21 | import styled from "@emotion/styled";
22 | import StyledButton from "@pages/popup/components/StyledButton";
23 | import { COLORS } from "@src/constant/style";
24 | import { t } from "@src/chrome/i18n";
25 |
26 | const StyledTextArea = styled(Textarea)`
27 | padding: 4px;
28 | `;
29 |
30 | type SlotDetailProps = {
31 | initialSlot: Slot;
32 | onUpdate: (slot: Slot) => void;
33 | exitDetail: () => void;
34 | };
35 |
36 | export default function SlotDetail({
37 | initialSlot,
38 | onUpdate,
39 | exitDetail,
40 | }: SlotDetailProps) {
41 | const [slot, setSlot] = useState(initialSlot);
42 |
43 | const onSaveButtonClick = () => {
44 | onUpdate(slot);
45 | exitDetail();
46 | };
47 |
48 | const updateSlot = (key: keyof Slot, value: Slot[keyof Slot]) => {
49 | setSlot((prevState) => ({
50 | ...prevState,
51 | [key]: value,
52 | }));
53 | };
54 |
55 | return (
56 |
57 |
58 | {t("slotDetail_promptSlotName")}
59 |
60 | updateSlot("name", event.target.value)}
66 | />
67 |
68 |
75 | {t("slotDetail_writePromptTitle")}
76 |
77 | {
85 | updateSlot("system", event.target.value);
86 | }}
87 | size="xs"
88 | />
89 |
90 |
96 | {t("slotDetail_temperatureTitle")}
97 |
98 | {
101 | updateSlot("temperature", temperature);
102 | }}
103 | />
104 |
105 |
124 |
125 |
126 |
127 | {t("slotDetail_saveButtonText")}
128 |
129 |
130 | {t("slotDetail_cancelButtonText")}
131 |
132 |
133 |
134 | );
135 | }
136 |
137 | const ModelSelectButton: ForwardRefRenderFunction<
138 | HTMLButtonElement,
139 | ButtonProps
140 | > = (props, ref) => {
141 | return ;
142 | };
143 |
144 | type TemperatureSliderProps = {
145 | temperature: number;
146 | onChangeTemperature: (temperature: number) => void;
147 | };
148 | const TemperatureSlider = ({
149 | temperature,
150 | onChangeTemperature,
151 | }: TemperatureSliderProps) => {
152 | const [showTooltip, setShowTooltip] = useState(false);
153 |
154 | return (
155 |
156 | onChangeTemperature(val)}
163 | onMouseEnter={() => setShowTooltip(true)}
164 | onMouseLeave={() => setShowTooltip(false)}
165 | >
166 |
167 |
168 |
169 |
177 |
178 |
179 |
180 |
181 | );
182 | };
183 |
--------------------------------------------------------------------------------
/src/shared/xState/streamChatStateMachine.ts:
--------------------------------------------------------------------------------
1 | import { assign, createMachine } from "xstate";
2 |
3 | type Events =
4 | | {
5 | type: "EXIT" | "QUERY" | "RESET" | "RECEIVE_CANCEL";
6 | }
7 | | {
8 | type: "SELECT_GPT_MODEL";
9 | data: Model;
10 | }
11 | | { type: "CHANGE_TEXT"; data: string }
12 | | { type: "RECEIVE_ING"; data: string }
13 | | { type: "RECEIVE_DONE"; data: string };
14 |
15 | interface Context {
16 | inputText: string;
17 | chats: Chat[];
18 | tempResponse: string;
19 | model: Model;
20 | error?: Error;
21 | cancelReceive?: () => unknown;
22 | }
23 |
24 | type Services = {
25 | getGPTResponse: {
26 | data: { cancel: Context["cancelReceive"]; firstChunk: string };
27 | };
28 | getChatHistoryFromBackground: {
29 | data: Chat[];
30 | };
31 | };
32 |
33 | const initialContext: Context = {
34 | inputText: "",
35 | chats: [],
36 | tempResponse: "",
37 | model: "gpt-3.5-turbo",
38 | };
39 |
40 | const streamChatStateMachine = createMachine(
41 | {
42 | id: "stream-chat-state",
43 | initial: "init",
44 | predictableActionArguments: true,
45 | context: initialContext,
46 | schema: {
47 | context: {} as Context,
48 | events: {} as Events,
49 | services: {} as Services,
50 | },
51 | tsTypes: {} as import("./streamChatStateMachine.typegen").Typegen0,
52 | states: {
53 | init: {
54 | invoke: {
55 | src: "getChatHistoryFromBackground",
56 | onDone: { target: "idle", actions: ["setChats"] },
57 | onError: { target: "idle" },
58 | },
59 | },
60 | idle: {
61 | on: {
62 | QUERY: {
63 | target: "loading",
64 | actions: ["addUserChat", "resetChatText"],
65 | cond: "isValidText",
66 | },
67 | EXIT: "finish",
68 | RESET: { actions: "resetChatData" },
69 | CHANGE_TEXT: {
70 | actions: "updateChatText",
71 | },
72 | SELECT_GPT_MODEL: {
73 | actions: "selectGptModel",
74 | },
75 | },
76 | },
77 | loading: {
78 | invoke: {
79 | src: "getGPTResponse",
80 | onDone: {
81 | target: "receiving",
82 | actions: ["addInitialAssistantChat", "setCancelReceive"],
83 | },
84 | onError: { target: "idle", actions: "addErrorChat" },
85 | },
86 | on: {
87 | EXIT: "finish",
88 | RESET: { actions: "resetChatData" },
89 | CHANGE_TEXT: {
90 | actions: "updateChatText",
91 | },
92 | SELECT_GPT_MODEL: {
93 | actions: "selectGptModel",
94 | },
95 | },
96 | },
97 | receiving: {
98 | on: {
99 | RECEIVE_ING: { target: "receiving", actions: "addResponseToken" },
100 | RECEIVE_DONE: { target: "idle", actions: "replaceLastResponse" },
101 | RECEIVE_CANCEL: { target: "idle", actions: "execCancelReceive" },
102 | CHANGE_TEXT: {
103 | actions: "updateChatText",
104 | },
105 | SELECT_GPT_MODEL: {
106 | actions: "selectGptModel",
107 | },
108 | },
109 | },
110 | finish: {
111 | type: "final",
112 | entry: "exitChatting",
113 | },
114 | },
115 | },
116 | {
117 | actions: {
118 | setChats: assign({
119 | chats: (_, event) => event.data,
120 | }),
121 | addUserChat: assign({
122 | chats: (context) =>
123 | context.chats.concat({
124 | role: "user",
125 | content: context.inputText,
126 | }),
127 | }),
128 | addInitialAssistantChat: assign({
129 | chats: (context, event) =>
130 | context.chats.concat({
131 | role: "assistant",
132 | content: event.data.firstChunk,
133 | }),
134 | }),
135 | addResponseToken: assign({
136 | chats: (context, event) => {
137 | return context.chats.map((chat, index) => {
138 | // if last index
139 | if (index === context.chats.length - 1) {
140 | return { ...chat, content: chat.content + event.data };
141 | }
142 | return chat;
143 | });
144 | },
145 | }),
146 | replaceLastResponse: assign({
147 | chats: (context, event) => {
148 | return context.chats.map((chat, index) => {
149 | if (index === context.chats.length - 1) {
150 | return { ...chat, content: event.data };
151 | }
152 | return chat;
153 | });
154 | },
155 | }),
156 | setCancelReceive: assign({
157 | cancelReceive: (_, event) => event.data.cancel,
158 | }),
159 | execCancelReceive: (context) => {
160 | context.cancelReceive?.();
161 | },
162 | addErrorChat: assign({
163 | chats: (context, event) => {
164 | const error: Error = event.data as Error;
165 | return context.chats.concat({
166 | role: "error",
167 | content: `${error?.name}\n${error?.message}`,
168 | });
169 | },
170 | }),
171 | updateChatText: assign({
172 | inputText: (_, event) => event.data,
173 | }),
174 | resetChatText: assign({
175 | inputText: () => "",
176 | }),
177 | resetChatData: assign({ chats: () => [] }),
178 | selectGptModel: assign({
179 | model: (_, event) => event.data,
180 | }),
181 | },
182 | guards: {
183 | isValidText: (context) => context.inputText.length > 0,
184 | },
185 | }
186 | );
187 |
188 | export default streamChatStateMachine;
189 |
--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | import type Chrome from "chrome";
2 | import {
3 | ChatHistories,
4 | SessionHistories,
5 | } from "@pages/background/lib/storage/chatHistoryStorage";
6 |
7 | declare namespace chrome {
8 | export default Chrome;
9 | }
10 |
11 | declare module "virtual:reload-on-update-in-background-script" {
12 | export const reloadOnUpdate: (watchPath: string) => void;
13 | export default reloadOnUpdate;
14 | }
15 |
16 | declare module "virtual:reload-on-update-in-view" {
17 | const refreshOnUpdate: (watchPath: string) => void;
18 | export default refreshOnUpdate;
19 | }
20 |
21 | declare module "*.svg" {
22 | import React = require("react");
23 | export const ReactComponent: React.SFC>;
24 | const src: string;
25 | export default src;
26 | }
27 |
28 | declare module "*.jpg" {
29 | const content: string;
30 | export default content;
31 | }
32 |
33 | declare module "*.png" {
34 | const content: string;
35 | export default content;
36 | }
37 |
38 | declare module "*.json" {
39 | const content: string;
40 | export default content;
41 | }
42 |
43 | declare global {
44 | type Model = "gpt-4-turbo" | "gpt-4o" | "gpt-3.5-turbo" | "gpt-4o-mini";
45 |
46 | type ChatGPTSlot = {
47 | type: Model;
48 | system?: string;
49 | /** config */
50 | maxTokens?: number; // max 4000
51 | temperature?: number; // 의외성 (0~1)
52 | topP?: number; // 단어 풀의 범위(0~1)
53 | frequencyPenalty?: number; // 자주 사용하는 단어 억제
54 | presencePenalty?: number; // 이미 사용된 단어 억제
55 | };
56 |
57 | type Slot = { id: string; name: string; isSelected: boolean } & ChatGPTSlot;
58 |
59 | type Chat = {
60 | role: "user" | "assistant" | "error";
61 | content: string;
62 | };
63 |
64 | type AddNewSlot = {
65 | type: "AddNewSlot";
66 | input: Slot;
67 | data?: "success";
68 | };
69 | type SelectSlot = {
70 | type: "SelectSlot";
71 | input: string;
72 | data?: "success";
73 | };
74 | type UpdateSlot = {
75 | type: "UpdateSlot";
76 | input: Slot;
77 | data?: "success";
78 | };
79 | type DeleteSlot = {
80 | type: "DeleteSlot";
81 | input: string;
82 | data?: "success";
83 | };
84 | type RequestOnetimeChatGPT = {
85 | type: "RequestOnetimeChatGPT";
86 | input: string;
87 | data?: { result: string };
88 | };
89 | type RequestGenerateChatGPTPrompt = {
90 | type: "RequestGenerateChatGPTPrompt";
91 | input: string;
92 | data?: { result: string };
93 | };
94 | type RequestOngoingChatGPT = {
95 | type: "RequestOngoingChatGPT";
96 | input: Chat[];
97 | data?: { result: string };
98 | };
99 | type RequestInitialDragGPT = {
100 | type: "RequestInitialDragGPTStream";
101 | input?: string;
102 | data?: { result: string; chunk?: string; isDone?: boolean };
103 | };
104 | type RequestDragGPT = {
105 | type: "RequestDragGPTStream";
106 | input?: { chats: Chat[]; sessionId: string };
107 | data?: { result: string; chunk?: string; isDone?: boolean };
108 | };
109 | type RequestQuickChatGPT = {
110 | type: "RequestQuickChatGPTStream";
111 | input?: {
112 | messages: Chat[];
113 | model: Model;
114 | };
115 | data?: { result: string; chunk?: string; isDone?: boolean };
116 | };
117 | type SaveAPIKey = {
118 | type: "SaveAPIKey";
119 | input: string;
120 | data?: "success";
121 | };
122 | type ResetAPIKey = {
123 | type: "ResetAPIKey";
124 | input?: never;
125 | data?: "success";
126 | };
127 | type GetAPIKey = {
128 | type: "GetAPIKey";
129 | input?: never;
130 | data?: string;
131 | };
132 | type GetSlots = {
133 | type: "GetSlots";
134 | input?: never;
135 | data?: Slot[];
136 | };
137 | type GetQuickChatHistory = {
138 | type: "GetQuickChatHistory";
139 | input?: never;
140 | data?: Chat[];
141 | };
142 | type ResetQuickChatHistory = {
143 | type: "ResetQuickChatHistory";
144 | input?: never;
145 | data?: "success";
146 | };
147 | type PushChatHistory = {
148 | type: "PushChatHistory";
149 | input: { chats: Chat | Chat[]; sessionId: string };
150 | data?: "success";
151 | };
152 | type SaveChatHistory = {
153 | type: "SaveChatHistory";
154 | input: { chats: Chat[]; sessionId: string; type: "Quick" | "Drag" };
155 | data?: "success";
156 | };
157 | type DeleteAllChatHistory = {
158 | type: "DeleteAllChatHistory";
159 | input?: never;
160 | data?: "success";
161 | };
162 | type DeleteChatHistorySession = {
163 | type: "DeleteChatHistorySession";
164 | input: string;
165 | data?: "success";
166 | };
167 | type GetAllChatHistory = {
168 | type: "GetAllChatHistory";
169 | input?: never;
170 | data?: ChatHistories;
171 | };
172 | type GetChatSessionHistory = {
173 | type: "GetChatSessionHistory";
174 | input: string;
175 | data?: SessionHistories;
176 | };
177 | type ErrorMessage = {
178 | type: "Error";
179 | input?: never;
180 | error: Error;
181 | };
182 |
183 | type Message =
184 | | RequestInitialDragGPT
185 | | RequestQuickChatGPT
186 | | RequestDragGPT
187 | | RequestOngoingChatGPT
188 | | ResetQuickChatHistory
189 | | SaveChatHistory
190 | | PushChatHistory
191 | | GetAllChatHistory
192 | | DeleteAllChatHistory
193 | | DeleteChatHistorySession
194 | | GetChatSessionHistory
195 | | GetQuickChatHistory
196 | | AddNewSlot
197 | | UpdateSlot
198 | | GetSlots
199 | | GetAPIKey
200 | | ResetAPIKey
201 | | SelectSlot
202 | | DeleteSlot
203 | | RequestOnetimeChatGPT
204 | | RequestGenerateChatGPTPrompt
205 | | SaveAPIKey;
206 |
207 | type RequestMessage = Omit;
208 | type ResponseMessage = Omit;
209 | }
210 |
--------------------------------------------------------------------------------
/src/pages/background/lib/storage/slotStorage.test.ts:
--------------------------------------------------------------------------------
1 | import { SlotStorage } from "@pages/background/lib/storage/slotStorage";
2 |
3 | describe("SlotStorage test", () => {
4 | describe("getAllSlots", () => {
5 | test("슬롯 데이터가 있는 경우 정상적으로 반환한다.", async () => {
6 | // given
7 | const savedSlots: Slot[] = [];
8 | jest
9 | .spyOn(SlotStorage.storage, "load")
10 | .mockImplementationOnce(() => Promise.resolve(savedSlots));
11 |
12 | // when
13 | const slots = await SlotStorage.getAllSlots();
14 |
15 | // then
16 | expect(slots).toEqual(savedSlots);
17 | });
18 | test("슬롯 데이터가 배열이 아닌 경우 빈 배열을 반환한다.", async () => {
19 | // given
20 | jest
21 | .spyOn(SlotStorage.storage, "load")
22 | .mockImplementationOnce(() => Promise.resolve("this is not array"));
23 |
24 | // when
25 | const slots = await SlotStorage.getAllSlots();
26 |
27 | // then
28 | expect(slots).toEqual([]);
29 | });
30 | test("슬롯 데이터를 가져오는 과정에서 에러가 날 경우 빈 배열을 반환한다.", async () => {
31 | // given
32 | jest
33 | .spyOn(SlotStorage.storage, "load")
34 | .mockImplementationOnce(() => Promise.reject(Error("unknown")));
35 |
36 | // when
37 | const slots = await SlotStorage.getAllSlots();
38 |
39 | // then
40 | expect(slots).toEqual([]);
41 | });
42 | });
43 |
44 | test("setAllSlots", async () => {
45 | // given
46 | const slots: Slot[] = [];
47 | jest
48 | .spyOn(SlotStorage.storage, "save")
49 | .mockImplementationOnce(() => Promise.resolve());
50 |
51 | // when
52 | const savedSlots = await SlotStorage.setAllSlots(slots);
53 |
54 | // then
55 | expect(savedSlots).toEqual(slots);
56 | });
57 |
58 | describe("getSelectedSlot", () => {
59 | test("선택된 슬롯이 없으면 에러가 발생한다", async () => {
60 | // given
61 | const savedSlots: Slot[] = [
62 | { type: "gpt-4o", id: "id", name: "name", isSelected: false },
63 | ];
64 | jest
65 | .spyOn(SlotStorage, "getAllSlots")
66 | .mockImplementation(() => Promise.resolve(savedSlots));
67 |
68 | // when
69 | const getSelectedSlot = async () => await SlotStorage.getSelectedSlot();
70 |
71 | // then
72 | await expect(getSelectedSlot()).rejects.toThrowError(
73 | "Check selected slot."
74 | );
75 | });
76 | test("선택된 슬롯이 있으면 가져온다", async () => {
77 | // given
78 | const savedSelectedSlot: Slot = {
79 | type: "gpt-4o",
80 | id: "id",
81 | name: "name",
82 | isSelected: true,
83 | };
84 | const savedSlots: Slot[] = [savedSelectedSlot];
85 | jest
86 | .spyOn(SlotStorage, "getAllSlots")
87 | .mockImplementation(() => Promise.resolve(savedSlots));
88 |
89 | // when
90 | const selectedSlot = await SlotStorage.getSelectedSlot();
91 |
92 | // then
93 | expect(selectedSlot).toEqual(savedSelectedSlot);
94 | });
95 | });
96 |
97 | describe("addSlot", () => {
98 | test("슬롯들이 비어있는 경우 > 선택되지 않은 새 슬롯을 넣으면 선택되어 반환된다.", async () => {
99 | // given
100 | const savedSlots: Slot[] = [];
101 | const slot: Slot = {
102 | type: "gpt-4o",
103 | id: "id",
104 | name: "name",
105 | isSelected: false,
106 | };
107 | jest
108 | .spyOn(SlotStorage, "getAllSlots")
109 | .mockImplementation(() => Promise.resolve(savedSlots));
110 | jest
111 | .spyOn(SlotStorage.storage, "save")
112 | .mockImplementation(() => Promise.resolve());
113 |
114 | // when
115 | const [addedSlot] = await SlotStorage.addSlot(slot);
116 |
117 | // then
118 | expect(addedSlot).toEqual({ ...slot, isSelected: true });
119 | });
120 | test("슬롯들이 비어있지 않은 경우 > 슬롯이 추가되어 반환된다.", async () => {
121 | // given
122 | const savedSlots: Slot[] = [
123 | {
124 | type: "gpt-4o",
125 | id: "id1",
126 | name: "name",
127 | isSelected: false,
128 | },
129 | ];
130 | const slot: Slot = {
131 | type: "gpt-4o",
132 | id: "id2",
133 | name: "name",
134 | isSelected: false,
135 | };
136 | jest
137 | .spyOn(SlotStorage, "getAllSlots")
138 | .mockImplementation(() => Promise.resolve(savedSlots));
139 | jest
140 | .spyOn(SlotStorage.storage, "save")
141 | .mockImplementation(() => Promise.resolve());
142 |
143 | // when
144 | const addedSlots = await SlotStorage.addSlot(slot);
145 |
146 | // then
147 | expect(addedSlots).toEqual(savedSlots.concat(slot));
148 | });
149 | });
150 | test("updateSlot", async () => {
151 | // given
152 | const slot: Slot = {
153 | type: "gpt-4o",
154 | id: "id",
155 | name: "name",
156 | isSelected: false,
157 | };
158 | const savedSlots: Slot[] = [slot];
159 | const updatedSlot = { ...slot, name: "updated" };
160 | jest
161 | .spyOn(SlotStorage, "getAllSlots")
162 | .mockImplementation(() => Promise.resolve(savedSlots));
163 | jest
164 | .spyOn(SlotStorage.storage, "save")
165 | .mockImplementation(() => Promise.resolve());
166 |
167 | // when
168 | const updatedSlots = await SlotStorage.updateSlot(updatedSlot);
169 |
170 | // then
171 | expect(updatedSlots).toEqual([updatedSlot]);
172 | });
173 |
174 | test("deleteSlot", async () => {
175 | // given
176 | const slotId = "slotId";
177 | const slot: Slot = {
178 | type: "gpt-4o",
179 | id: slotId,
180 | name: "name",
181 | isSelected: false,
182 | };
183 | const savedSots: Slot[] = [slot];
184 | jest
185 | .spyOn(SlotStorage, "getAllSlots")
186 | .mockImplementation(() => Promise.resolve(savedSots));
187 | jest
188 | .spyOn(SlotStorage.storage, "save")
189 | .mockImplementation(() => Promise.resolve());
190 |
191 | // when
192 | const deletedSlots = await SlotStorage.deleteSlot(slotId);
193 |
194 | // then
195 | expect(deletedSlots.find(({ id }) => id === slotId)).toBe(undefined);
196 | });
197 | });
198 |
--------------------------------------------------------------------------------
/src/pages/popup/pages/SlotListPage.tsx:
--------------------------------------------------------------------------------
1 | import { Button, HStack, Link, Switch, Text, VStack } from "@chakra-ui/react";
2 | import { useMachine } from "@xstate/react";
3 | import slotListPageStateMachine from "@pages/popup/xState/slotListPageStateMachine";
4 | import SlotDetail from "@pages/popup/components/SlotDetail";
5 | import Footer from "@pages/popup/components/layout/Footer";
6 | import {
7 | sendMessageToBackground,
8 | sendMessageToBackgroundAsync,
9 | } from "@src/chrome/message";
10 | import SlotListItem from "@pages/popup/components/SlotListItem";
11 | import { COLORS } from "@src/constant/style";
12 | import { createNewChatGPTSlot } from "@src/shared/slot/createNewChatGPTSlot";
13 | import { t } from "@src/chrome/i18n";
14 | import { useEffect, useState } from "react";
15 | import { OnOffStorage } from "@pages/background/lib/storage/onOffStorage";
16 |
17 | const getAllSlotsFromBackground = async () => {
18 | return await sendMessageToBackgroundAsync({
19 | type: "GetSlots",
20 | });
21 | };
22 |
23 | const addSlotMessageSendToBackground = (newSlot: Slot) => {
24 | sendMessageToBackground({
25 | message: { type: "AddNewSlot", input: newSlot },
26 | });
27 | };
28 | const updateSlotMessageSendToBackground = (updatedSlot: Slot) => {
29 | sendMessageToBackground({
30 | message: {
31 | type: "UpdateSlot",
32 | input: updatedSlot,
33 | },
34 | });
35 | };
36 |
37 | const selectSlotMessageSendToBackground = (slotId: string) => {
38 | sendMessageToBackground({
39 | message: { type: "SelectSlot", input: slotId },
40 | });
41 | };
42 |
43 | const deleteSlotMessageSendToBackground = (slotId: string) => {
44 | sendMessageToBackground({
45 | message: {
46 | type: "DeleteSlot",
47 | input: slotId,
48 | },
49 | });
50 | };
51 |
52 | type SlotListPageProps = {
53 | onClickChangeApiKey: () => void;
54 | onClickQuickChatButton: () => void;
55 | };
56 |
57 | export default function SlotListPage({
58 | onClickChangeApiKey,
59 | onClickQuickChatButton,
60 | }: SlotListPageProps) {
61 | const [state, send] = useMachine(slotListPageStateMachine, {
62 | services: {
63 | getAllSlotsFromBackground,
64 | },
65 | actions: {
66 | exitPage: onClickChangeApiKey,
67 | deleteSlotMessageSendToBackground: (_, event) => {
68 | deleteSlotMessageSendToBackground(event.data);
69 | },
70 | updateSlotMessageSendToBackground: (_, event) => {
71 | updateSlotMessageSendToBackground(event.data);
72 | },
73 | selectSlotMessageSendToBackground: (_, event) => {
74 | selectSlotMessageSendToBackground(event.data);
75 | },
76 | addSlotMessageSendToBackground: (_, event) => {
77 | addSlotMessageSendToBackground(event.data);
78 | },
79 | },
80 | });
81 |
82 | const addNewSlot = () => {
83 | const newSlot = createNewChatGPTSlot();
84 | send({
85 | type: "ADD_SLOT",
86 | data: newSlot,
87 | });
88 | goToSlotDetail(newSlot.id);
89 | };
90 |
91 | const selectSlot = (slotId: string) => {
92 | send({ type: "SELECT_SLOT", data: slotId });
93 | };
94 |
95 | const updateSlotData = (slot: Slot) => {
96 | send({ type: "UPDATE_SLOT", data: slot });
97 | };
98 |
99 | const deleteSlot = (slotId: string) => {
100 | send({ type: "DELETE_SLOT", data: slotId });
101 | };
102 |
103 | const goToSlotDetail = (slotId: string) => {
104 | send({ type: "EDIT_SLOT", data: slotId });
105 | };
106 |
107 | const onClickResetButton = () => {
108 | if (confirm(t("slotListPage_resetApiKeyConfirmMessage"))) {
109 | send("CHANGE_API_KEY");
110 | }
111 | };
112 |
113 | return (
114 | <>
115 | {state.matches("slot_list") && (
116 |
117 |
118 |
121 |
128 |
131 |
138 |
139 |
140 |
141 |
142 | {t("slotListPage_promptSlotsTitle")}
143 |
144 |
145 | {state.context.slots.map((slot, index) => (
146 | selectSlot(slot.id)}
151 | onDetail={() => goToSlotDetail(slot.id)}
152 | onDelete={() => deleteSlot(slot.id)}
153 | />
154 | ))}
155 |
156 | )}
157 | {state.matches("slot_detail") && (
158 | send("BACK_TO_LIST")}
162 | />
163 | )}
164 |
165 |
166 | );
167 | }
168 |
169 | const OnOffSwitch = () => {
170 | const [isOn, setIsOn] = useState(null);
171 |
172 | useEffect(() => {
173 | OnOffStorage.getOnOff().then((onOff) => {
174 | setIsOn(onOff);
175 | });
176 | }, []);
177 |
178 | if (isOn === null) {
179 | return null;
180 | }
181 |
182 | return (
183 | {
186 | OnOffStorage.toggle().then(() => {
187 | setIsOn(!isOn);
188 | });
189 | }}
190 | />
191 | );
192 | };
193 |
--------------------------------------------------------------------------------
/src/pages/content/src/ContentScriptApp/DragGPT.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import {
3 | getSelectionNodeRect,
4 | getSelectionText,
5 | } from "@pages/content/src/ContentScriptApp/utils/selection";
6 | import GPTRequestButton from "@pages/content/src/ContentScriptApp/components/GPTRequestButton";
7 | import ResponseMessageBox from "@pages/content/src/ContentScriptApp/components/messageBox/ResponseMessageBox";
8 | import ErrorMessageBox from "@pages/content/src/ContentScriptApp/components/messageBox/ErrorMessageBox";
9 | import { useMachine } from "@xstate/react";
10 | import delayPromise from "@pages/content/src/ContentScriptApp/utils/delayPromise";
11 | import dragStateMachine from "@pages/content/src/ContentScriptApp/xState/dragStateMachine";
12 | import { sendMessageToBackground } from "@src/chrome/message";
13 | import styled from "@emotion/styled";
14 | import { getPositionOnScreen } from "@pages/content/src/ContentScriptApp/utils/getPositionOnScreen";
15 | import useSelectedSlot from "@pages/content/src/ContentScriptApp/hooks/useSelectedSlot";
16 | import ChatText from "@src/shared/component/ChatText";
17 | import AssistantChat from "@src/shared/component/AssistantChat";
18 | import MessageBox from "@pages/content/src/ContentScriptApp/components/messageBox/MessageBox";
19 | import { t } from "@src/chrome/i18n";
20 | import { OnOffStorage } from "@pages/background/lib/storage/onOffStorage";
21 |
22 | const Container = styled.div`
23 | * {
24 | font-family: "Noto Sans KR", sans-serif;
25 | }
26 | `;
27 |
28 | const skipLoopCycleOnce = async () => await delayPromise(1);
29 |
30 | async function getGPTResponseAsStream({
31 | input,
32 | onDelta,
33 | onFinish,
34 | }: {
35 | input: string;
36 | onDelta: (chunk: string) => unknown;
37 | onFinish: (result: string) => unknown;
38 | }) {
39 | return new Promise<{ firstChunk: string }>((resolve, reject) => {
40 | sendMessageToBackground({
41 | message: {
42 | type: "RequestInitialDragGPTStream",
43 | input,
44 | },
45 | handleSuccess: (response) => {
46 | if (response.isDone || !response.chunk) {
47 | return onFinish(response.result);
48 | }
49 | resolve({ firstChunk: response.chunk });
50 | onDelta(response.chunk);
51 | },
52 | handleError: reject,
53 | });
54 | });
55 | }
56 |
57 | export default function DragGPT() {
58 | const selectedSlot = useSelectedSlot();
59 | const [state, send] = useMachine(dragStateMachine, {
60 | actions: {
61 | setPositionOnScreen: (context) => {
62 | const { left, width, height, top } = context.selectedTextNodeRect;
63 | const verticalCenter = left + width / 2;
64 | const horizontalCenter = top + height / 2;
65 | context.positionOnScreen = getPositionOnScreen({
66 | horizontalCenter,
67 | verticalCenter,
68 | });
69 | },
70 | },
71 | services: {
72 | getGPTResponse: (context) =>
73 | getGPTResponseAsStream({
74 | input: context.selectedText,
75 | onDelta: (chunk) => send("RECEIVE_ING", { data: chunk }),
76 | onFinish: () => send("RECEIVE_END"),
77 | }),
78 | checkOnOffState: async () => {
79 | const isOn = await OnOffStorage.getOnOff();
80 | if (!isOn) {
81 | throw new Error("Off");
82 | }
83 | },
84 | },
85 | });
86 |
87 | useEffect(() => {
88 | const onMouseUp = async (event: MouseEvent) => {
89 | /** Selection 이벤트 호출을 기다리는 해키한 코드 */
90 | await skipLoopCycleOnce();
91 | send({
92 | type: "TEXT_SELECTED",
93 | data: {
94 | selectedText: getSelectionText(),
95 | selectedNodeRect: getSelectionNodeRect(),
96 | requestButtonPosition: {
97 | top: event.clientY + window.scrollY,
98 | left: event.clientX + window.scrollX,
99 | },
100 | },
101 | });
102 | };
103 |
104 | window.document.addEventListener("mouseup", onMouseUp);
105 | return () => {
106 | window.document.removeEventListener("mouseup", onMouseUp);
107 | };
108 | }, []);
109 |
110 | const requestGPT = () => {
111 | send("REQUEST");
112 | };
113 |
114 | const closeMessageBox = () => {
115 | send("CLOSE_MESSAGE_BOX");
116 | };
117 |
118 | return (
119 |
120 | {state.hasTag("showRequestButton") && (
121 |
128 | )}
129 | {state.matches("temp_response_message_box") && (
130 |
134 | {state.context.chats.at(-1)?.content}
135 |
136 | }
137 | width={480}
138 | isOutsideClickDisabled={true}
139 | onClose={() => send("RECEIVE_CANCEL")}
140 | anchorTop={state.context.anchorNodePosition.top}
141 | anchorCenter={state.context.anchorNodePosition.center}
142 | anchorBottom={state.context.anchorNodePosition.bottom}
143 | positionOnScreen={state.context.positionOnScreen}
144 | />
145 | )}
146 | {state.hasTag("showResponseMessages") && (
147 |
155 | )}
156 | {state.matches("error_message_box") && (
157 |
165 | )}
166 |
167 | );
168 | }
169 |
--------------------------------------------------------------------------------
/src/pages/content/src/ContentScriptApp/xState/dragStateMachine.ts:
--------------------------------------------------------------------------------
1 | import type { PositionOnScreen } from "@pages/content/src/ContentScriptApp/utils/getPositionOnScreen";
2 | import { assign, createMachine } from "xstate";
3 |
4 | type NodeRect = { left: number; width: number; height: number; top: number };
5 | type RequestButtonPosition = { top: number; left: number };
6 | type AnchorNodePosition = {
7 | top: number;
8 | bottom: number;
9 | center: number;
10 | };
11 |
12 | type TextSelectedEvent = {
13 | type: "TEXT_SELECTED";
14 | data: {
15 | selectedText: string;
16 | selectedNodeRect?: NodeRect;
17 | requestButtonPosition: RequestButtonPosition;
18 | };
19 | };
20 |
21 | type Events =
22 | | TextSelectedEvent
23 | | { type: "CLOSE_MESSAGE_BOX" | "REQUEST" | "RECEIVE_END" | "RECEIVE_CANCEL" }
24 | | { type: "RECEIVE_ING"; data: string };
25 |
26 | interface Context {
27 | chats: Chat[];
28 | selectedText: string;
29 | selectedTextNodeRect: NodeRect;
30 | requestButtonPosition: RequestButtonPosition;
31 | positionOnScreen: PositionOnScreen;
32 | anchorNodePosition: AnchorNodePosition;
33 | error?: Error;
34 | }
35 |
36 | type Services = {
37 | getGPTResponse: {
38 | data: { firstChunk: string };
39 | };
40 | checkOnOffState: {
41 | data: void;
42 | };
43 | };
44 |
45 | const initialContext: Context = {
46 | chats: [] as Chat[],
47 | selectedText: "",
48 | requestButtonPosition: { top: 0, left: 0 },
49 | anchorNodePosition: { top: 0, center: 0, bottom: 0 },
50 | selectedTextNodeRect: { top: 0, left: 0, height: 0, width: 0 },
51 | positionOnScreen: "topLeft",
52 | error: undefined,
53 | } as const;
54 |
55 | const dragStateMachine = createMachine(
56 | {
57 | id: "drag-state",
58 | initial: "idle",
59 | predictableActionArguments: true,
60 | context: initialContext,
61 | schema: {
62 | context: {} as Context,
63 | events: {} as Events,
64 | services: {} as Services,
65 | },
66 | tsTypes: {} as import("./dragStateMachine.typegen").Typegen0,
67 | states: {
68 | idle: {
69 | entry: ["resetAll"],
70 | on: {
71 | TEXT_SELECTED: {
72 | target: "on_off_check",
73 | actions: "readyRequestButton",
74 | cond: "isValidTextSelectedEvent",
75 | },
76 | },
77 | },
78 | on_off_check: {
79 | invoke: {
80 | src: "checkOnOffState",
81 | onError: "idle",
82 | onDone: "request_button",
83 | },
84 | },
85 | request_button: {
86 | tags: "showRequestButton",
87 | on: {
88 | TEXT_SELECTED: [
89 | {
90 | actions: "readyRequestButton",
91 | cond: "isValidTextSelectedEvent",
92 | },
93 | {
94 | target: "idle",
95 | cond: "isInvalidTextSelectedEvent",
96 | },
97 | ],
98 | REQUEST: { target: "loading", actions: "addRequestChat" },
99 | },
100 | },
101 | loading: {
102 | tags: "showRequestButton",
103 | entry: ["setAnchorNodePosition"],
104 | exit: ["setPositionOnScreen"],
105 | invoke: {
106 | src: "getGPTResponse",
107 | onDone: {
108 | target: "temp_response_message_box",
109 | actions: "addInitialResponseChat",
110 | },
111 | onError: {
112 | target: "error_message_box",
113 | actions: assign({
114 | error: (_, event) => event.data,
115 | }),
116 | },
117 | },
118 | },
119 | temp_response_message_box: {
120 | on: {
121 | RECEIVE_ING: {
122 | actions: "addResponseChatChunk",
123 | },
124 | RECEIVE_END: "response_message_box",
125 | RECEIVE_CANCEL: "idle",
126 | },
127 | },
128 | response_message_box: {
129 | tags: "showResponseMessages",
130 | on: {
131 | CLOSE_MESSAGE_BOX: "idle",
132 | },
133 | },
134 | error_message_box: {
135 | on: {
136 | CLOSE_MESSAGE_BOX: "idle",
137 | },
138 | },
139 | },
140 | },
141 | {
142 | actions: {
143 | resetAll: assign({ ...initialContext }),
144 | setAnchorNodePosition: assign({
145 | anchorNodePosition: (context) => {
146 | const { left, width, height, top } = context.selectedTextNodeRect;
147 | const verticalCenter = left + width / 2;
148 | return {
149 | top: top + window.scrollY,
150 | bottom: top + height + window.scrollY,
151 | center: verticalCenter + window.scrollX,
152 | };
153 | },
154 | }),
155 | readyRequestButton: assign({
156 | selectedText: (_, event) => event.data.selectedText,
157 | selectedTextNodeRect: (context, event) =>
158 | event.data.selectedNodeRect ?? context.selectedTextNodeRect,
159 | requestButtonPosition: (_, event) => event.data.requestButtonPosition,
160 | }),
161 | addRequestChat: assign({
162 | chats: (context) =>
163 | context.chats.concat({ role: "user", content: context.selectedText }),
164 | }),
165 | addInitialResponseChat: assign({
166 | chats: (context, event) =>
167 | context.chats.concat({
168 | role: "assistant",
169 | content: event.data.firstChunk,
170 | }),
171 | }),
172 | addResponseChatChunk: assign({
173 | chats: ({ chats }, event) => {
174 | const lastChat = chats.at(-1);
175 | if (!lastChat) {
176 | return chats;
177 | }
178 | return chats
179 | .slice(0, chats.length - 1)
180 | .concat({ ...lastChat, content: lastChat.content + event.data });
181 | },
182 | }),
183 | },
184 | guards: {
185 | isValidTextSelectedEvent: (_, event) => {
186 | return isValidTextSelectedEvent(event);
187 | },
188 | isInvalidTextSelectedEvent: (_, event) => {
189 | return !isValidTextSelectedEvent(event);
190 | },
191 | },
192 | }
193 | );
194 |
195 | function isValidTextSelectedEvent(event: TextSelectedEvent): boolean {
196 | if (!event.data.selectedNodeRect) {
197 | return false;
198 | }
199 | return event.data.selectedText.length > 1;
200 | }
201 |
202 | export default dragStateMachine;
203 |
--------------------------------------------------------------------------------
/src/pages/content/src/ContentScriptApp/components/messageBox/ResponseMessageBox.tsx:
--------------------------------------------------------------------------------
1 | import MessageBox, {
2 | MessageBoxProps,
3 | } from "@pages/content/src/ContentScriptApp/components/messageBox/MessageBox";
4 | import StyledButton from "@pages/popup/components/StyledButton";
5 | import { FormEventHandler } from "react";
6 | import {
7 | BoxProps,
8 | Button,
9 | HStack,
10 | Input,
11 | Text,
12 | VStack,
13 | } from "@chakra-ui/react";
14 | import DraggableBox from "@pages/content/src/ContentScriptApp/components/DraggableBox";
15 | import { useMachine } from "@xstate/react";
16 | import ChatText from "@src/shared/component/ChatText";
17 | import AssistantChat from "@src/shared/component/AssistantChat";
18 | import UserChat from "@src/shared/component/UserChat";
19 | import { useScrollDownEffect } from "@src/shared/hook/useScrollDownEffect";
20 | import { useCopyClipboard } from "@src/shared/hook/useCopyClipboard";
21 | import { t } from "@src/chrome/i18n";
22 | import { DragHandleIcon } from "@chakra-ui/icons";
23 | import streamChatStateMachine from "@src/shared/xState/streamChatStateMachine";
24 | import { getDragGPTResponseAsStream } from "@src/shared/services/getGPTResponseAsStream";
25 | import { sendMessageToBackgroundAsync } from "@src/chrome/message";
26 | import useGeneratedId from "@src/shared/hook/useGeneratedId";
27 | import { COLORS } from "@src/constant/style";
28 |
29 | type ResponseMessageBoxProps = Omit<
30 | MessageBoxProps,
31 | "header" | "width" | "footer" | "content"
32 | > & {
33 | initialChats: Chat[];
34 | };
35 |
36 | export default function ResponseMessageBox({
37 | initialChats,
38 | onClose,
39 | ...restProps
40 | }: ResponseMessageBoxProps) {
41 | const { id: sessionId } = useGeneratedId("drag_");
42 | const [state, send] = useMachine(streamChatStateMachine, {
43 | services: {
44 | getChatHistoryFromBackground: async () => {
45 | void sendMessageToBackgroundAsync({
46 | type: "SaveChatHistory",
47 | input: { sessionId, chats: initialChats, type: "Drag" },
48 | });
49 | return initialChats;
50 | },
51 | getGPTResponse: (context) => {
52 | void sendMessageToBackgroundAsync({
53 | type: "PushChatHistory",
54 | input: { sessionId, chats: context.chats.at(-1) as Chat },
55 | });
56 | return getDragGPTResponseAsStream({
57 | input: { chats: context.chats, sessionId },
58 | onDelta: (chunk) => send("RECEIVE_ING", { data: chunk }),
59 | onFinish: (result) => {
60 | send("RECEIVE_DONE", { data: result });
61 | void sendMessageToBackgroundAsync({
62 | type: "PushChatHistory",
63 | input: {
64 | sessionId,
65 | chats: { role: "assistant", content: result },
66 | },
67 | });
68 | },
69 | });
70 | },
71 | },
72 | actions: {
73 | exitChatting: onClose,
74 | },
75 | });
76 |
77 | /** 첫 번째 질문 숨김처리 (드래깅으로 질문) */
78 | const [, ...chats] = state.context.chats;
79 | const isLoading = state.matches("loading");
80 | const isReceiving = state.matches("receiving");
81 |
82 | const { scrollDownRef } = useScrollDownEffect([chats.at(-1)?.content]);
83 | const { isCopied, copy } = useCopyClipboard([
84 | chats.filter(({ role }) => role === "assistant").length,
85 | ]);
86 |
87 | const onClickStopButton = () => {
88 | send("RECEIVE_CANCEL");
89 | };
90 |
91 | const onClickCopy = async () => {
92 | const lastResponseText = findLastResponseChat(chats);
93 | if (lastResponseText) {
94 | await copy(lastResponseText.content);
95 | }
96 | };
97 | // TODO refactor
98 | const lastResponseIndex: number = (() => {
99 | if (isLoading) {
100 | return chats.length - 2;
101 | }
102 | return chats.length - 1;
103 | })();
104 |
105 | const onChatSubmit: FormEventHandler = (event) => {
106 | event.preventDefault();
107 | send({ type: "QUERY" });
108 | };
109 |
110 | return (
111 |
124 |
125 | {t("responseMessageBox_responseTitle")}
126 |
127 | }
128 | onClose={() => send("EXIT")}
129 | width={480}
130 | isOutsideClickDisabled={chats.length > 1}
131 | content={
132 |
138 | {chats.map((chat, index) => (
139 |
140 | ))}
141 |
142 | }
143 | footer={
144 |
145 |
146 |
153 | send({ type: "CHANGE_TEXT", data: e.target.value })
154 | }
155 | onKeyDown={(e) => e.stopPropagation()}
156 | />
157 |
158 |
167 |
168 |
169 |
174 | {isReceiving && (
175 |
182 | )}
183 |
184 |
185 | }
186 | {...restProps}
187 | />
188 | );
189 | }
190 |
191 | type ChatBoxProps = {
192 | chat: Chat;
193 | } & BoxProps;
194 | export const ChatBox = ({ chat, ...restProps }: ChatBoxProps) => {
195 | if (chat.role === "error") {
196 | return (
197 |
198 | {chat.content}
199 |
200 | );
201 | }
202 |
203 | if (chat.role === "assistant") {
204 | return (
205 |
206 | {chat.content}
207 |
208 | );
209 | }
210 |
211 | return (
212 |
213 | {chat.content.trim()}
214 |
215 | );
216 | };
217 |
218 | function findLastResponseChat(chats: Chat[]) {
219 | return chats.filter((chat) => chat.role === "assistant").at(-1);
220 | }
221 |
--------------------------------------------------------------------------------
![logo]({chrome.runtime.getURL("./logo-dark.png")}){kind=logo}
38 | {children}
39 |