add coming soon alert

src/components/Generator.tsx

@@ -2,6 +2,8 @@ import { Index, Show, createEffect, createSignal, onCleanup, onMount } from 'sol
 import { useThrottleFn } from 'solidjs-use'
 import { generateSignature } from '@/utils/auth'
 import IconClear from './icons/Clear'
+import IconX from './icons/X'
+import Picture from './icons/Picture'
 import MessageItem from './MessageItem'
 import ErrorMessageItem from './ErrorMessageItem'
 import type { ChatMessage, ErrorMessage } from '@/types'
@@ -14,6 +16,7 @@ export default () => {
   const [loading, setLoading] = createSignal(false)
   const [controller, setController] = createSignal<AbortController>(null)
   const [isStick, setStick] = createSignal(false)
+  const [showComingSoon, setShowComingSoon] = createSignal(false)
   const maxHistoryMessages = parseInt(import.meta.env.PUBLIC_MAX_HISTORY_MESSAGES || '99')
 
   createEffect(() => (isStick() && smoothToBottom()))
@@ -203,8 +206,25 @@ export default () => {
     }
   }
 
+  const handlePictureUpload = () => {
+    // coming soon
+    setShowComingSoon(true)
+  }
+
   return (
     <div my-6>
+      {/* beautiful coming soon alert box, position: fixed, screen center */}
+      {showComingSoon() && <div class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+        {/* With Close Icon */}
+        <div class="bg-slate/10 rounded-md p-4 text-center">
+          <div class="text-2xl font-bold">Coming Soon...</div>
+          <div class="text-base mt-2">Chat with picture is coming soon!</div>
+          <button class="absolute top-1 right-1" onClick={() => setShowComingSoon(false)}>
+            <IconX />
+          </button>
+        </div>
+      </div>}
+
       <Index each={messageList()}>
         {(message, index) => (
           <MessageItem
@@ -231,7 +251,10 @@ export default () => {
           </div>
         )}
       >
-        <div class="gen-text-wrapper">
+        <div class="gen-text-wrapper relative">
+          <button title="Picture" onClick={handlePictureUpload} class="absolute left-1rem top-50% translate-y-[-50%]">
+            <Picture />
+          </button>
           <textarea
             ref={inputRef!}
             onKeyDown={handleKeydown}

src/components/icons/Picture.tsx

@@ -0,0 +1,7 @@
+export default () => {
+  return (
+  <svg width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#555" d="M19.0909091,2 C19.5929861,2 20,2.39796911 20,2.88888889 L20,17.1111111 C20,17.6020309 19.5929861,18 19.0909091,18 L0.909090909,18 C0.407013864,18 0,17.6020309 0,17.1111111 L0,2.88888889 C0,2.39796911 0.407013864,2 0.909090909,2 L19.0909091,2 Z M5.41498358,8.41650391 L1.35528564,12.4593235 L1.35528564,16.6760254 L18.6397145,16.6760254 L18.6397145,15.243208 L15.4396522,12.1229367 L12.6626905,14.4561124 C12.4973565,14.5726194 12.3372165,14.6241229 12.1822704,14.6106228 C12.0273243,14.5971228 11.8813994,14.5342746 11.7444957,14.4220785 L5.41498358,8.41650391 Z M18.634732,3.33114963 L1.36244722,3.33114963 L1.36244722,10.5609045 L4.96842818,6.9698622 C5.10609945,6.86625615 5.2524821,6.81445312 5.40757613,6.81445312 C5.56267016,6.81445312 5.69937041,6.86096747 5.81767689,6.95399616 L12.2491594,13.0423991 L15.0544045,10.6911214 C15.1877478,10.594062 15.3280547,10.5455322 15.4753252,10.5455322 C15.6225956,10.5455322 15.761728,10.594062 15.8927224,10.6911214 L18.634732,13.3555356 L18.634732,3.33114963 Z M15.2726045,5.22858343 C16.0257201,5.22858343 16.6362408,5.8255371 16.6362408,6.56191676 C16.6362408,7.29829643 16.0257201,7.8952501 15.2726045,7.8952501 C14.5194889,7.8952501 13.9089681,7.29829643 13.9089681,6.56191676 C13.9089681,5.8255371 14.5194889,5.22858343 15.2726045,5.22858343 Z"/>
+  </svg>
+  )
+}

unocss.config.ts

@@ -49,7 +49,7 @@ export default defineConfig({
     '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',
+    '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 pl-10',
     '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',
     'stick-btn-on': '!bg-$c-fg text-$c-bg hover:op-80',
   }],