chore: control center

2024-10-01 01:06:13 -04:00 · 2022-12-15 00:02:54 +08:00 · 2022-12-15 00:02:54 +08:00 · cd7d5fab63
commit cd7d5fab63
parent 8363ff234d
16 changed files with 168 additions and 264 deletions
--- a/AWESOME.md
+++ b/AWESOME.md
@ -10,6 +10,7 @@
 - [ChatGPT Export and Share](https://github.com/liady/ChatGPT-pdf) - A Chrome extension for downloading your ChatGPT history to PNG, PDF or creating a sharable link
 - [ChatGPT for Google](https://github.com/wong2/chat-gpt-google-extension) - A browser extension to display ChatGPT response alongside Google Search results
 - [ChatGPT Extension](https://github.com/kazuki-sf/ChatGPT_Extension) - ChatGPT Extension is a really simple Chrome Extension (manifest v3) that you can access OpenAI's ChatGPT from anywhere on the web.
+- [ChatGPT-Google](https://github.com/ZohaibAhmed/ChatGPT-Google) - Chrome Extension that Integrates ChatGPT (Unofficial) into Google Search

 `VSCode`

@ -18,3 +19,8 @@
 `Bot`

 - [ChatGPT Telegram Bot](https://github.com/altryne/chatGPT-telegram-bot) - This is a very early attempt at having chatGPT work within a telegram bot
+
+## Tools
+
+- [commitgpt](https://github.com/RomanHotsiy/commitgpt) - Automatically generate commit messages using ChatGPT
+- [ShareGPT](https://sharegpt.com/) - ShareGPT: Share your wildest ChatGPT conversations with one click.
--- a/package.json
+++ b/package.json
@ -32,6 +32,7 @@
  "dependencies": {
    "@tauri-apps/api": "^1.2.0",
    "antd": "^5.0.6",
+    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.5"
@ -39,6 +40,7 @@
  "devDependencies": {
    "@tauri-apps/cli": "^1.2.2",
    "@tauri-release/cli": "^0.2.3",
+    "@types/lodash": "^4.14.191",
    "@types/node": "^18.7.10",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
--- a/src-tauri/src/app/cmd.rs
+++ b/src-tauri/src/app/cmd.rs
@ -35,9 +35,8 @@ pub fn get_chat_conf() -> ChatConfJson {
 }

 #[command]
-pub fn form_confirm(app: AppHandle, data: serde_json::Value) {
+pub fn form_confirm(_app: AppHandle, data: serde_json::Value) {
    ChatConfJson::amend(&serde_json::json!(data)).unwrap();
-    tauri::api::process::restart(&app.env());
 }

 #[command]
--- a/src-tauri/src/app/menu.rs
+++ b/src-tauri/src/app/menu.rs
@ -1,5 +1,4 @@
 use crate::{
-    app::window,
    conf::{self, ChatConfJson},
    utils,
 };
@ -71,14 +70,6 @@ pub fn init(context: &Context<EmbeddedAssets>) -> Menu {
            #[cfg(target_os = "macos")]
            titlebar_menu.into(),
            MenuItem::Separator.into(),
-            // fix: Checking if the site connection is secure
-            // @link: https://github.com/lencx/ChatGPT/issues/17
-            CustomMenuItem::new("user_agent".to_string(), "User Agent")
-                .accelerator("CmdOrCtrl+U")
-                .into(),
-            CustomMenuItem::new("switch_origin".to_string(), "Switch Origin")
-                .accelerator("CmdOrCtrl+O")
-                .into(),
            CustomMenuItem::new("inject_script".to_string(), "Inject Script")
                .accelerator("CmdOrCtrl+J")
                .into(),
@ -174,8 +165,6 @@ pub fn menu_handler(event: WindowMenuEvent<tauri::Wry>) {
        "inject_script" => open(&app, script_path),
        "go_conf" => utils::open_file(utils::chat_root()),
        "clear_conf" => utils::clear_conf(&app),
-        "switch_origin" => window::origin_window(&app),
-        "user_agent" => window::ua_window(&app),
        "awesome" => open(&app, conf::AWESOME_URL.to_string()),
        "titlebar" => {
            let chat_conf = conf::ChatConfJson::get_chat_conf();
--- a/src-tauri/src/app/window.rs
+++ b/src-tauri/src/app/window.rs
@ -23,31 +23,3 @@ pub fn mini_window(handle: &tauri::AppHandle) {
        .hide()
        .unwrap();
 }
-
-pub fn origin_window(handle: &tauri::AppHandle) {
-    let chat_conf = conf::ChatConfJson::get_chat_conf();
-    WindowBuilder::new(handle, "origin", WindowUrl::App(chat_conf.origin.into()))
-        .resizable(false)
-        .fullscreen(false)
-        .inner_size(400.0, 300.0)
-        .always_on_top(true)
-        .decorations(false)
-        .initialization_script(include_str!("../assets/core.js"))
-        .initialization_script(include_str!("../assets/origin.js"))
-        .build()
-        .unwrap();
-}
-
-pub fn ua_window(handle: &tauri::AppHandle) {
-    let chat_conf = conf::ChatConfJson::get_chat_conf();
-    WindowBuilder::new(handle, "ua", WindowUrl::App(chat_conf.origin.into()))
-        .resizable(false)
-        .fullscreen(false)
-        .inner_size(540.0, 480.0)
-        .always_on_top(true)
-        .decorations(false)
-        .initialization_script(include_str!("../assets/core.js"))
-        .initialization_script(include_str!("../assets/ua.js"))
-        .build()
-        .unwrap();
-}
--- a/src-tauri/src/assets/origin.js
+++ b/src-tauri/src/assets/origin.js
@ -1,79 +0,0 @@
-// *** Core Script - Origin ***
-
-function init() {
-  document.body.innerHTML = `<style>
-  body {
-    height: 100vh;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-family: Söhne,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
-  }
-  h3 {
-    margin-bottom: 20px;
-  }
-  input {
-    all: unset;
-    width: 280px;
-    height: 30px;
-    margin-bottom: 10px;
-    padding: 0 5px;
-    border: solid 2px #d8d8d8;
-    background-color: #fff;
-    border-radius: 5px !important;
-    color: #4a4a4a;
-  }
-  button {
-    all: unset;
-    height: 30px;
-    font-size: 16px;
-    padding: 0 10px;
-    line-height: 30px;
-    margin: 0 5px;
-    color: #fff;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-  #cancel {
-    background-color: #999;
-  }
-  #confirm {
-    background-color: #10a37f;
-  }
-  </style>
-  <h3>Switch Origin</h3>
-  <input id="input" type="text" autocapitalize="off" autocomplete="off" spellcheck="false" autofocus placeholder="https://chat.openai.com" />
-  <div class="btns">
-    <button id="cancel">Cancel</button>
-    <button id="confirm">Confirm</button>
-  </div>`;
-
-  const srcipt = document.createElement('script');
-  srcipt.innerHTML = `const input = document.getElementById('input');
-  const cancelBtn = document.getElementById('cancel');
-  const confirmBtn = document.getElementById('confirm');
-  cancelBtn.addEventListener('click', () => {
-    window.invoke('form_cancel', { label: 'origin', title: 'Switch Origin', msg: 'Are you sure you want to cancel editing?' });
-  })
-  confirmBtn.addEventListener('click', () => {
-    if (/^https?:\\/\\//.test(input.value)) {
-      window.invoke('form_confirm', { data: { origin: input.value } });
-    } else {
-      window.invoke('form_msg', { label: 'origin', title: 'Switch Origin', msg: 'Invalid URL!' });
-    }
-  })`;
-  document.head.appendChild(srcipt);
-}
-
-// run init
-if (
-  document.readyState === "complete" ||
-  document.readyState === "interactive"
-) {
-  init();
-} else {
-  document.addEventListener("DOMContentLoaded", init);
-}
--- a/src-tauri/src/assets/ua.js
+++ b/src-tauri/src/assets/ua.js
@ -1,91 +0,0 @@
-// *** Core Script - User Agent ***
-
-function init() {
-  document.body.innerHTML = `<style>
-  body {
-    height: 100vh;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-family: Söhne,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
-  }
-  h3 {
-    margin-bottom: 20px;
-  }
-  textarea {
-    all: unset;
-    width: 300px;
-    height: 60px;
-    margin-bottom: 10px;
-    padding: 10px;
-    border: solid 2px #d8d8d8;
-    background-color: #fff;
-    border-radius: 5px !important;
-    color: #4a4a4a;
-  }
-  button {
-    all: unset;
-    height: 30px;
-    font-size: 16px;
-    padding: 0 10px;
-    line-height: 30px;
-    margin: 0 5px;
-    color: #fff;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-  #cancel {
-    background-color: #999;
-  }
-  #confirm {
-    background-color: #10a37f;
-  }
-  .item {
-    display: flex;
-    align-items: center;
-  }
-  label {
-    width: 120px;
-    margin-right: 10px;
-  }
-  </style>
-  <h3>User Agent</h3>
-  <div class="item">
-    <label>Main Window (PC)</label>
-    <textarea id="ua_pc" type="text" autocapitalize="off" autocomplete="off" spellcheck="false" autofocus placeholder="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) ..."></textarea>
-  </div>
-  <div class="item">
-    <label>Tray Window (Phone)</label>
-    <textarea id="ua_phone" type="text" autocapitalize="off" autocomplete="off" spellcheck="false" autofocus placeholder="Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS ..."></textarea>
-  </div>
-  <div class="btns">
-    <button id="cancel">Cancel</button>
-    <button id="confirm">Confirm</button>
-  </div>`;
-
-  const srcipt = document.createElement('script');
-  srcipt.innerHTML = `const ua_pc = document.getElementById('ua_pc');
-  const ua_phone = document.getElementById('ua_phone');
-  const cancelBtn = document.getElementById('cancel');
-  const confirmBtn = document.getElementById('confirm');
-  cancelBtn.addEventListener('click', () => {
-    window.invoke('form_cancel', { label: 'ua', title: 'User Agent', msg: 'Are you sure you want to cancel editing?' });
-  })
-  confirmBtn.addEventListener('click', () => {
-    window.invoke('form_confirm', { data: { ua_pc: ua_pc.value, ua_phone: ua_phone.value } });
-  })`;
-  document.head.appendChild(srcipt);
-}
-
-// run init
-if (
-  document.readyState === "complete" ||
-  document.readyState === "interactive"
-) {
-  init();
-} else {
-  document.addEventListener("DOMContentLoaded", init);
-}
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@ -69,7 +69,9 @@
        "label": "main",
        "url": "index.html",
        "title": "ChatGPT",
-        "visible": false
+        "visible": false,
+        "width": 800,
+        "height": 600
      }
    ]
  }
--- a/src/layout/index.scss
+++ b/src/layout/index.scss
@ -11,3 +11,14 @@
 .chat-container {
  padding: 20px;
 }
+
+.ant-menu {
+  .ant-menu-item {
+    background-color: #f8f8f8;
+  }
+}
+
+.ant-layout-footer {
+  color: #666 !important;
+  opacity: 0.7;
+}
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@ -1,51 +1,30 @@
 import { FC, useState } from 'react';
-import {
-  DesktopOutlined,
-  BulbOutlined
-} from '@ant-design/icons';
-import type { MenuProps } from 'antd';
 import { Layout, Menu } from 'antd';
+import { useNavigate } from 'react-router-dom';
+
+import Routes, { menuItems } from '@/routes';
+
 import './index.scss';

 const { Content, Footer, Sider } = Layout;

-type MenuItem = Required<MenuProps>['items'][number];
-
-function getItem(
-  label: React.ReactNode,
-  key: React.Key,
-  icon?: React.ReactNode,
-  children?: MenuItem[],
-): MenuItem {
-  return {
-    key,
-    icon,
-    children,
-    label,
-  } as MenuItem;
-}
-
-const items: MenuItem[] = [
-  getItem('General', 'general', <DesktopOutlined />),
-  getItem('ChatGPT Prompts', 'chatgpt-prompts', <BulbOutlined />),
-];
-
 interface ChatLayoutProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
 }

 const ChatLayout: FC<ChatLayoutProps> = ({ children }) => {
  const [collapsed, setCollapsed] = useState(false);
+  const go = useNavigate();

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider theme="light" collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="chat-logo"><img src="/logo.png" /></div>
-        <Menu defaultSelectedKeys={['1']} mode="inline" items={items} />
+        <Menu defaultSelectedKeys={['/']} mode="vertical" items={menuItems} onClick={(i) => go(i.key)} />
      </Sider>
      <Layout className="chat-layout">
        <Content className="chat-container">
-          {children}
+          <Routes />
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          <a href="https://github.com/lencx/chatgpt" target="_blank">ChatGPT Desktop Application</a> ©2022 Created by lencx</Footer>
--- a/src/main.tsx
+++ b/src/main.tsx
@ -2,14 +2,14 @@ import { StrictMode, Suspense } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import ReactDOM from 'react-dom/client';

-import Routes from './routes';
+import Layout from '@/layout';
 import './main.scss';

 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <StrictMode>
    <Suspense fallback={null}>
      <BrowserRouter>
-        <Routes />
+        <Layout/>
      </BrowserRouter>
    </Suspense>
  </StrictMode>
--- a/src/routes.tsx
+++ b/src/routes.tsx
@ -1,22 +1,44 @@
-import { useLayoutEffect } from 'react';
-import { useLocation, useRoutes } from 'react-router-dom';
+import { useRoutes } from 'react-router-dom';
+import {
+  DesktopOutlined,
+  BulbOutlined
+} from '@ant-design/icons';
 import type { RouteObject } from 'react-router-dom';
+import type { MenuProps } from 'antd';

-import App from '@view/App';
+import General from '@view/General';
+import ChatGPTPrompts from '@view/ChatGPTPrompts';

-const routes: RouteObject[] = [
+export type ChatRouteObject = {
+  label: string;
+  icon?: React.ReactNode,
+};
+
+export const routes: Array<RouteObject & { meta: ChatRouteObject }> = [
  {
    path: '/',
-    element: <App />
-  }
+    element: <General />,
+    meta: {
+      label: 'General',
+      icon: <DesktopOutlined />,
+    },
+  },
+  {
+    path: '/chatgpt-prompts',
+    element: <ChatGPTPrompts />,
+    meta: {
+      label: 'ChatGPT Prompts',
+      icon: <BulbOutlined />,
+    },
+  },
 ];

+type MenuItem = Required<MenuProps>['items'][number];
+export const menuItems: MenuItem[] = routes.map(i => ({
+  ...i.meta,
+  key: i.path || '',
+}));
+
 export default () => {
-  const location = useLocation();
-  const pathname = location.pathname;
-  useLayoutEffect(() => {
-    const name = pathname.substring(1).replace(/\//gi, '_');
-    document.body.className = `${name ? name : 'main'}_screen`
-  }, [pathname]);
  return useRoutes(routes);
 };
--- a/src/view/App.tsx
+++ b/src/view/App.tsx
@ -1,9 +0,0 @@
-import Layout from "@layout/index";
-
-export default function Dashboard() {
-  return (
-    <Layout>
-      Hello
-    </Layout>
-  )
-}
--- a/src/view/ChatGPTPrompts.tsx
+++ b/src/view/ChatGPTPrompts.tsx
@ -0,0 +1,7 @@
+export default function Dashboard() {
+  return (
+    <div>
+      TODO: ChatGPT Prompts
+    </div>
+  )
+}
--- a/src/view/General.tsx
+++ b/src/view/General.tsx
@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { Form, Radio, Switch, Input, Button, Space, message } from 'antd';
+import { invoke } from '@tauri-apps/api';
+import { platform } from '@tauri-apps/api/os';
+import { ask } from '@tauri-apps/api/dialog';
+import { relaunch } from '@tauri-apps/api/process';
+import { clone, pick, isEqual } from 'lodash';
+
+const restartNames = ['origin', 'ua_window', 'ua_tray']
+
+export default function General() {
+  const [form] = Form.useForm();
+  const [platformInfo, setPlatform] = useState<string>('');
+  const [chatConf, setChatConf] = useState<any>(null);
+
+  const init = async () => {
+    setPlatform(await platform());
+    const chatData = await invoke('get_chat_conf');
+    setChatConf(chatData);
+  }
+
+  useEffect(() => {
+    init();
+  }, [])
+
+  useEffect(() => {
+    form.setFieldsValue(clone(chatConf));
+  }, [chatConf])
+
+  console.log('«28» /src/view/General.tsx ~> ', chatConf);
+
+
+  const onCancel = () => {
+    form.setFieldsValue(chatConf);
+  };
+
+  const onFinish = async (values: any) => {
+    await invoke('form_confirm', { data: values, label: 'main' });
+    console.log('«33» /src/view/General.tsx ~> ', pick(chatConf, restartNames), pick(values, restartNames));
+
+    if (!isEqual(pick(chatConf, restartNames), pick(values, restartNames))) {
+      const isOk = await ask(`Configuration saved successfully, whether to restart?`, {
+        title: 'ChatGPT Preferences'
+      });
+      if (isOk) relaunch();
+      return;
+    }
+
+    message.success('Configuration saved successfully');
+  };
+
+  return (
+    <Form
+      form={form}
+      style={{ maxWidth: 500 }}
+      onFinish={onFinish}
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 15, offset: 1 }}
+    >
+      <Form.Item label="Theme" name="theme">
+        <Radio.Group>
+          <Radio value="Light">Light</Radio>
+          <Radio value="Dark">Dark</Radio>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="Always on Top" name="always_on_top" valuePropName="checked">
+        <Switch />
+      </Form.Item>
+      {platformInfo === 'darwin' && (
+        <Form.Item label="Titlebar" name="titlebar" valuePropName="checked">
+          <Switch />
+        </Form.Item>
+      )}
+      <Form.Item label="Switch Origin" name="origin">
+        <Input placeholder="https://chat.openai.com" />
+      </Form.Item>
+      <Form.Item label="User Agent (Window)" name="ua_window">
+        <Input.TextArea autoSize={{ minRows: 2, maxRows: 4 }} placeholder="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36" />
+      </Form.Item>
+      <Form.Item label="User Agent (Tray)" name="ua_tray">
+        <Input.TextArea autoSize={{ minRows: 2, maxRows: 4 }} placeholder="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36" />
+      </Form.Item>
+      <Form.Item>
+        <Space size={20}>
+          <Button onClick={onCancel}>Cancel</Button>
+          <Button type="primary" htmlType="submit">
+            Submit
+          </Button>
+        </Space>
+      </Form.Item>
+    </Form>
+  )
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -17,6 +17,7 @@
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
+      "@/*": ["src/*"],
      "@view/*": ["src/view/*"],
      "@comps/*": ["src/components/*"],
      "@layout/*": ["src/layout/*"],