chore: update

.vscode/extensions.json

@@ -1,4 +1,4 @@
 {
   "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
+  "unwantedRecommendations": [],
 }

astro.config.mjs

@@ -1,9 +1,5 @@
 import { defineConfig } from 'astro/config'
 import unocss from 'unocss/astro'
-import { presetUno } from 'unocss'
-import presetAttributify from '@unocss/preset-attributify'
-import presetTypography from '@unocss/preset-typography'
-import presetIcons from '@unocss/preset-icons'
 import solidJs from '@astrojs/solid-js'
 import vercelDisableBlocks from './plugins/vercelDisableBlocks'
 
@@ -23,20 +19,7 @@ const envAdapter = () => {
 // https://astro.build/config
 export default defineConfig({
   integrations: [
-    unocss({
-      presets: [
-        presetAttributify(),
-        presetUno(),
-        presetTypography({
-          cssExtend: {
-            "ul,ol": {
-              "padding-left": "2em"
-            }
-          }
-        }),
-        presetIcons(),
-      ]
-    }),
+    unocss(),
     solidJs()
   ],
   output: 'server',
@@ -46,4 +29,4 @@ export default defineConfig({
       process.env.OUTPUT == 'vercel' && vercelDisableBlocks(),
     ]
   },
-});
+});

package.json

@@ -21,7 +21,6 @@
     "highlight.js": "^11.7.0",
     "js-sha256": "^0.9.0",
     "katex": "^0.6.0",
-    "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
     "markdown-it-highlightjs": "^4.0.1",
     "markdown-it-katex": "^2.0.3",

src/components/Footer.astro

@@ -2,17 +2,17 @@
   <p mt-8 text-xs op-30>
     <span pr-1>Made by</span>
     <a
-    border-b border-slate border-none hover:border-dashed
+      b-slate-link
       href="https://ddiu.io" target="_blank"
     >
       Diu
     </a>
     <span px-1>|</span>
     <a
-      border-b border-slate border-none hover:border-dashed
+      b-slate-link
       href="https://github.com/ddiu8081/chatgpt-demo" target="_blank"
     >
       Source Code
     </a>
   </p>
-</footer>
+</footer>

src/components/Generator.tsx

@@ -3,8 +3,8 @@ import { createSignal, Index, Show } from 'solid-js'
 import IconClear from './icons/Clear'
 import MessageItem from './MessageItem'
 import SystemRoleSettings from './SystemRoleSettings'
-import _ from 'lodash'
 import { generateSignature } from '@/utils/auth'
+import { useThrottleFn } from 'solidjs-use'
 
 export default () => {
   let inputRef: HTMLTextAreaElement
@@ -32,12 +32,11 @@ export default () => {
     ])
     requestWithLatestMessage()
   }
-  const throttle =_.throttle(function(){
-    window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'})
-  }, 300, {
-    leading: true,
-    trailing: false
-  })
+
+  const smoothToBottom = useThrottleFn(() => {
+    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
+  }, 300, false, true)
+
   const requestWithLatestMessage = async () => {
     setLoading(true)
     setCurrentAssistantMessage('')
@@ -87,7 +86,7 @@ export default () => {
           if (char) {
             setCurrentAssistantMessage(currentAssistantMessage() + char)
           }
-          throttle()
+          smoothToBottom()
         }
         done = readerDone
       }
@@ -179,13 +178,13 @@ export default () => {
       <Show
         when={!loading()}
         fallback={() => (
-          <div class="h-12 my-4 flex gap-4 items-center justify-center bg-slate bg-op-15 rounded-sm">
+          <div class="gen-cb-wrapper">
             <span>AI is thinking...</span>
-            <div class="px-2 py-0.5 border border-slate rounded-md text-sm op-70 cursor-pointer hover:bg-slate/10" onClick={stopStreamFetch}>Stop</div>
+            <div class="gen-cb-stop" onClick={stopStreamFetch}>Stop</div>
           </div>
         )}
       >
-        <div class="my-4 flex items-center gap-2 transition-opacity" class:op-50={systemRoleEditing()}>
+        <div class="gen-text-wrapper" class:op-50={systemRoleEditing()}>
           <textarea
             ref={inputRef!}
             disabled={systemRoleEditing()}
@@ -198,25 +197,12 @@ export default () => {
               inputRef.style.height = inputRef.scrollHeight + 'px';
             }}
             rows="1"
-            w-full
-            px-3 py-3
-            min-h-12
-            max-h-36
-            rounded-sm
-            bg-slate
-            bg-op-15
-            resize-none
-            focus:bg-op-20
-            focus:ring-0
-            focus:outline-none
-            placeholder:op-50
-            dark="placeholder:op-30"
-            scroll-pa-8px
+            class='gen-textarea'
           />
-          <button onClick={handleButtonClick} disabled={systemRoleEditing()} h-12 px-4 py-2 bg-slate bg-op-15 hover:bg-op-20 rounded-sm>
+          <button onClick={handleButtonClick} disabled={systemRoleEditing()} gen-slate-btn>
             Send
           </button>
-          <button title="Clear" onClick={clear} disabled={systemRoleEditing()} h-12 px-4 py-2 bg-slate bg-op-15 hover:bg-op-20 rounded-sm>
+          <button title="Clear" onClick={clear} disabled={systemRoleEditing()} gen-slate-btn>
             <IconClear />
           </button>
         </div>

src/components/Header.astro

@@ -4,13 +4,13 @@ import Themetoggle from './Themetoggle.astro'
 ---
 
 <header>
-  <div class="flex justify-between">
+  <div class="fb">
     <Logo />
     <Themetoggle />
   </div>
-  <div class="flex items-center mt-2">
-    <span class="text-2xl font-extrabold mr-1">ChatGPT</span>
-    <span class="text-2xl text-transparent font-extrabold bg-clip-text bg-gradient-to-r from-sky-400 to-emerald-600">Demo</span>
+  <div class="fi mt-2">
+    <span class="gpt-title">ChatGPT</span>
+    <span class="gpt-subtitle">Demo</span>
   </div>
   <p mt-1 op-60>Based on OpenAI API (gpt-3.5-turbo).</p>
-</header>
+</header>

src/components/MessageItem.tsx

@@ -46,9 +46,9 @@ export default ({ role, message, showRetry, onRetry }: Props) => {
       const rawCode = fence(...args)
 
       return `<div relative>
-      <div data-code=${encodeURIComponent(token.content)} class="copy-btn absolute top-12px right-12px z-3 flex justify-center items-center border b-transparent w-8 h-8 p-2 bg-light-300 dark:bg-dark-300 op-90 transition-all group cursor-pointer">
+      <div data-code=${encodeURIComponent(token.content)} class="copy-btn gpt-copy-btn group">
           <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" /><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" /></svg>
-            <div class="opacity-0 h-7 bg-black px-2.5 py-1 box-border text-xs c-white inline-flex justify-center items-center  rounded absolute z-1 transition duration-600 whitespace-nowrap -top-8" group-hover:opacity-100>
+            <div class="group-hover:op-100 gpt-copy-tips">
               ${copied() ? 'Copied' : 'Copy'}
             </div>
       </div>
@@ -71,8 +71,8 @@ export default ({ role, message, showRetry, onRetry }: Props) => {
         <div class="message prose break-words overflow-hidden" innerHTML={htmlString()} />
       </div>
       {showRetry?.() && onRetry && (
-        <div class="flex items-center justify-end px-3 mb-2">
-          <div onClick={onRetry} class="flex items-center gap-1 px-2 py-0.5 op-70 border border-slate rounded-md text-sm cursor-pointer hover:bg-slate/10">
+        <div class="fie px-3 mb-2">
+          <div onClick={onRetry} class="gpt-retry-btn">
             <IconRefresh />
             <span>Regenerate</span>
           </div>

src/components/SystemRoleSettings.tsx

@@ -23,7 +23,7 @@ export default (props: Props) => {
       <Show when={!props.systemRoleEditing()}>
         <Show when={props.currentSystemRoleSettings()}>
           <div>
-            <div class="flex items-center gap-1 op-50 dark:op-60">
+            <div class="fi gap-1 op-50 dark:op-60">
               <IconEnv />
               <span>System Role:</span>
             </div>
@@ -33,15 +33,15 @@ export default (props: Props) => {
           </div>
         </Show>
         <Show when={!props.currentSystemRoleSettings() && props.canEdit()}>
-          <span onClick={() => props.setSystemRoleEditing(!props.systemRoleEditing())} class="inline-flex items-center justify-center gap-1 text-sm bg-slate/20 px-2 py-1 rounded-md transition-colors cursor-pointer hover:bg-slate/50">
+          <span onClick={() => props.setSystemRoleEditing(!props.systemRoleEditing())} class="sys-edit-btn">
             <IconEnv />
             <span>Add System Role</span>
           </span>
         </Show>
       </Show>
       <Show when={props.systemRoleEditing() && props.canEdit()}>
         <div>
-          <div class="flex items-center gap-1 op-50 dark:op-60">
+          <div class="fi gap-1 op-50 dark:op-60">
             <IconEnv />
             <span>System Role:</span>
           </div>
@@ -53,23 +53,10 @@ export default (props: Props) => {
               autocomplete="off"
               autofocus
               rows="3"
-              w-full
-              px-3 py-3 my-1
-              min-h-12
-              max-h-36
-              rounded-sm
-              bg-slate
-              bg-op-15
-              focus:bg-op-20
-              focus:ring-0
-              focus:outline-none
-              placeholder:op-50
-              dark="placeholder:op-30"
-              overflow-hidden
-              resize-none scroll-pa-8px
+              gen-textarea
             />
           </div>
-          <button onClick={handleButtonClick} h-12 px-4 py-2 bg-slate bg-op-15 hover:bg-op-20 rounded-sm>
+          <button onClick={handleButtonClick} gen-slate-btn>
             Set
           </button>
         </div>

src/pages/password.astro

@@ -3,11 +3,11 @@ import Layout from '../layouts/Layout.astro'
 ---
 
 <Layout title="Password Protection">
-  <main class="h-screen flex flex-col items-center justify-center">
+  <main class="h-screen col-fcc">
     <div class="op-30">Please input password</div>
     <div id="input_container" class="flex mt-4">
-      <input id="password_input" type="password" class="px-4 py-3 h-12 rounded-sm bg-slate bg-op-15 focus:bg-op-20 focus:ring-0 focus:outline-none" />
-      <div id="submit" class="flex items-center justify-center h-12 w-12 bg-slate cursor-pointer bg-op-20 hover:bg-op-50">
+      <input id="password_input" type="password" class="gpt-password-input" />
+      <div id="submit" class="gpt-password-submit">
         <div class="i-carbon-arrow-right" />
       </div>
     </div>
@@ -69,4 +69,4 @@ async function handleSubmit() {
 .invalid {
   animation: shake 0.2s ease-in-out 0s 2;
 }
-</style>
+</style>

unocss.config.ts

@@ -0,0 +1,47 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      scale: 1.1,
+      cdn: 'https://esm.sh/',
+    }),
+    presetTypography(),
+  ],
+  transformers: [transformerVariantGroup(), transformerDirectives()],
+  shortcuts: [{
+    'fc': 'flex justify-center',
+    'fi': 'flex items-center',
+    'fb': 'flex justify-between',
+    'fcc': 'fc items-center',
+    'fie': 'fi justify-end',
+    'col-fcc': 'flex-col fcc',
+    'inline-fcc': 'inline-flex items-center justify-center',
+    'base-focus': 'focus:(bg-op-20 ring-0 outline-none)',
+    'b-slate-link': 'border-b border-(slate none) hover:border-dashed',
+    'gpt-title': 'text-2xl font-extrabold mr-1',
+    'gpt-subtitle': 'text-(2xl transparent) font-extrabold bg-(clip-text gradient-to-r) from-sky-400 to-emerald-600',
+    'gpt-copy-btn': 'absolute top-12px right-12px z-3 fcc border b-transparent w-8 h-8 p-2 bg-light-300 dark:bg-dark-300 op-90 cursor-pointer',
+    'gpt-copy-tips': 'op-0 h-7 bg-black px-2.5 py-1 box-border text-xs c-white fcc rounded absolute z-1 transition duration-600 whitespace-nowrap -top-8',
+    'gpt-retry-btn': 'fi gap-1 px-2 py-0.5 op-70 border border-slate rounded-md text-sm cursor-pointer hover:bg-slate/10',
+    'gpt-password-input': 'px-4 py-3 h-12 rounded-sm bg-(slate op-15) base-focus',
+    'gpt-password-submit': 'fcc h-12 w-12 bg-slate cursor-pointer bg-op-20 hover:bg-op-50',
+    'gen-slate-btn': 'h-12 px-4 py-2 bg-(slate op-15) hover:bg-op-20 rounded-sm',
+    'gen-cb-wrapper': 'h-12 my-4 fcc gap-4 bg-(slate op-15) rounded-sm',
+    'gen-cb-stop': 'px-2 py-0.5 border border-slate rounded-md text-sm op-70 cursor-pointer hover:bg-slate/10',
+    'gen-text-wrapper': 'my-4 fc gap-2 transition-opacity',
+    'gen-textarea': 'w-full px-3 py-3 min-h-12 max-h-36 rounded-sm bg-(slate op-15) resize-none base-focus placeholder:op-50 dark:(placeholder:op-30) scroll-pa-8px',
+    'sys-edit-btn': 'inline-fcc gap-1 text-sm bg-slate/20 px-2 py-1 rounded-md transition-colors cursor-pointer hover:bg-slate/50',
+  }]
+})
+