chore: chatgpt prompts

src-tauri/tauri.conf.json

@@ -71,7 +71,9 @@
         "title": "ChatGPT",
         "visible": false,
         "width": 800,
-        "height": 600
+        "height": 600,
+        "minWidth": 800,
+        "minHeight": 600
       }
     ]
   }

src/layout/index.tsx

@@ -1,6 +1,6 @@
 import { FC, useState } from 'react';
 import { Layout, Menu } from 'antd';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 import Routes, { menuItems } from '@/routes';
 
@@ -14,13 +14,14 @@ interface ChatLayoutProps {
 
 const ChatLayout: FC<ChatLayoutProps> = ({ children }) => {
   const [collapsed, setCollapsed] = useState(false);
+  const location = useLocation();
   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={['/']} mode="vertical" items={menuItems} onClick={(i) => go(i.key)} />
+        <Menu defaultSelectedKeys={[location.pathname]} mode="vertical" items={menuItems} onClick={(i) => go(i.key)} />
       </Sider>
       <Layout className="chat-layout">
         <Content className="chat-container">

src/routes.tsx

@@ -7,7 +7,7 @@ import type { RouteObject } from 'react-router-dom';
 import type { MenuProps } from 'antd';
 
 import General from '@view/General';
-import ChatGPTPrompts from '@view/ChatGPTPrompts';
+import ChatGPTPrompts from '@/view/ChatGPTPrompts';
 
 export type ChatRouteObject = {
   label: string;

src/view/ChatGPTPrompts/config.tsx

@@ -0,0 +1,23 @@
+import { Tag, Tooltip } from 'antd';
+
+export const columns = [
+  {
+    title: 'Command',
+    dataIndex: 'cmd',
+    key: 'cmd',
+  },
+  {
+    title: 'Type',
+    dataIndex: 'type',
+    key: 'type',
+    render: (v: string) => <Tag>{v}</Tag>
+  },
+  {
+    title: 'Content',
+    dataIndex: 'content',
+    key: 'content',
+    render: (v: string) => (
+      <Tooltip overlayInnerStyle={{ width: 350 }} title={v}><span className="chat-prompts-val">{v}</span></Tooltip>
+    ),
+  },
+];

src/view/ChatGPTPrompts/index.scss

@@ -0,0 +1,12 @@
+.chat-prompts-val {
+  display: inline-block;
+  width: 100%;
+  max-width: 300px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.add-btn {
+  margin-bottom: 20px;
+}

src/view/ChatGPTPrompts/index.tsx

@@ -0,0 +1,34 @@
+import { Table, Button } from 'antd';
+
+import { columns } from './config';
+import './index.scss';
+
+const dataSource = [
+  {
+    cmd: 'terminal',
+    type: 'dev',
+    content: 'i want you to act as a linux terminal. I will type commands and you will reply with what the terminal should show. I want you to only reply with the terminal output inside one unique code block, and nothing else. do not write explanations. do not type commands unless I instruct you to do so. when i need to tell you something in english, i will do so by putting text inside curly brackets {like this}. my first command is pwd',
+  },
+  {
+    cmd: 'translator',
+    type: 'tools',
+    content: 'I want you to act as an English translator, spelling corrector and improver. I will speak to you in any language and you will detect the language, translate it and answer in the corrected and improved version of my text, in English. I want you to replace my simplified A0-level words and sentences with more beautiful and elegant, upper level English words and sentences. Keep the meaning same, but make them more literary. I want you to only reply the correction, the improvements and nothing else, do not write explanations. My first sentence is "istanbulu cok seviyom burada olmak cok guzel"',
+  },
+];
+
+export default function ChatGPTPrompts() {
+  return (
+    <div>
+      <Button className="add-btn" type="primary">Add Command</Button>
+      <Table
+        rowKey="content"
+        columns={columns}
+        dataSource={dataSource}
+        pagination={{
+          hideOnSinglePage: true,
+          pageSize: 10,
+        }}
+      />
+    </div>
+  )
+}