feat: implement length limitation for prompt text during editing

Signed-off-by: DingChil <xu.dingchao@gmail.com>

src/components/PromptEditor.vue

@@ -12,6 +12,7 @@
         ref="textareaRef"
         v-model="command"
         :class="$style.content__textarea"
+        maxlength="2048"
         :placeholder="prompt.command || $gettext('Set a prompt here')"
       />
       <article :class="$style.content__back">

src/csui/Index/TheEntry.vue

@@ -24,7 +24,7 @@
     }"
   >
     <ThePopupBox id="webpilot_popup" :is-ask-page="isAskPage" @close-popup="handleClosePopup" />
-    <section ref="refDragHandle" :class="$style.dragHandle"></section>
+    <section ref="refDragHandle" :class="$style.draggingBody" />
   </section>
 </template>
 
@@ -277,13 +277,26 @@ const shortcutText = computed(() => {
   background-color: #fff;
 }
 
-.dragHandle {
+.draggingBody {
   position: absolute;
-  top: 0;
+  top: -14px;
   left: 0;
   width: 612px;
-  height: 8px;
-  cursor: move;
+  height: 22px;
+  background: var(--webpilot-theme-content-background-color, #fff) center / 14px no-repeat;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
   user-select: none;
+
+  &:hover {
+    background-image: url('data-base64:~src/components/image/IconDraggingLight.svg');
+    cursor: pointer;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .draggingBody:hover {
+    background-image: url('data-base64:~src/components/image/IconDraggingDark.svg');
+  }
 }
 </style>

src/csui/Index/ThePopupBox/ThePopupBox.vue

@@ -350,7 +350,7 @@ const handleCommandChange = () => {
 }
 
 const handleInputFocus = () => {
-  if (showPrompts.value && !showResult.value) inputCommand.value = ''
+  // if (showPrompts.value && !showResult.value) inputCommand.value = ''
   if (!showPrompts.value && showResult.value) handleShowMenu()
 }