feat: add creation prompt button to menu, remove save prompt button f…

…rom input field Signed-off-by: DingChil <[email protected]>
webpilot-ai · Nov 2, 2023 · c23970d · c23970d
1 parent e3aa1c9
commit c23970d
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 34 deletions.
diff --git a/assets/locales/en/messages.json b/assets/locales/en/messages.json
@@ -8,6 +8,9 @@
   "Active_Webpilot": {
     "message": "Active Webpilot"
   },
+  "Add_a_new_prompt": {
+    "message": "Add a new prompt"
+  },
   "and_pin_Webpilot_to_your_nav_bar": {
     "message": "and pin Webpilot to your nav bar"
   },

diff --git a/assets/locales/zh_CN/messages.json b/assets/locales/zh_CN/messages.json
@@ -8,6 +8,9 @@
   "Active_Webpilot": {
     "message": "启用 Webpilot"
   },
+  "Add_a_new_prompt": {
+    "message": "新建一个提示"
+  },
   "and_pin_Webpilot_to_your_nav_bar": {
     "message": "然后将 Webpilot 固定在导航栏"
   },

diff --git a/assets/styles/csui-theme.scss b/assets/styles/csui-theme.scss
@@ -1,5 +1,5 @@
 /* Theme Color */
-/* stylelint-disable */
+
 :root {
   --webpilot-theme-main-text-color: #929497;
   --webpilot-theme-icon-default-and-secondary-text: #585b58;
@@ -14,10 +14,6 @@
   --webpilot-theme-brightness-number: 1;
   --webpilot-theme-invert-number: 0;
 }
-#webpilot-template {
-  @import './reset.scss';
-  @import './solarized_light.scss';
-}
 
 @media (prefers-color-scheme: dark) {
   :root {
@@ -34,7 +30,4 @@
     --webpilot-theme-brightness-number: 3;
     --webpilot-theme-invert-number: 1;
   }
-  #webpilot-template {
-    @import './solarized_dark.scss';
-  }
 }
diff --git a/assets/styles/themes.scss b/assets/styles/themes.scss
@@ -0,0 +1,68 @@
+/* Theme Color */
+/* stylelint-disable */
+:root {
+  --webpilot-theme-main-text-color: #929497;
+  --webpilot-theme-icon-default-and-secondary-text: #585b58;
+  --webpilot-theme-main-background-color: #fff;
+  --webpilot-theme-content-background-color: #fff;
+  --webpilot-theme-baseline-text: #292929;
+  --webpilot-theme-main-background-shadow: rgb(149 157 165 / 20%);
+
+  /* only text link or title need to change */
+  --webpilot-theme-brand-primary: #4f5aff;
+  --webpilot-theme-stoke-and-hover-status: #dbdeff;
+  --webpilot-theme-brightness-number: 1;
+  --webpilot-theme-invert-number: 0;
+}
+#webpilot-template {
+  @import './solarized_light.scss';
+}
+#webpilot-content {
+  p {
+    margin: 0;
+    line-height: 1.6;
+  }
+  pre {
+    padding: 0;
+  }
+  code {
+    font-size: 14px;
+    padding: 1 5px;
+    background: #fdf6e3;
+    color: #657b83;
+    border-radius: 6px;
+    box-shadow: none;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --webpilot-theme-main-text-color: #fff;
+    --webpilot-theme-icon-default-and-secondary-text: #4f5aff33;
+    --webpilot-theme-main-background-color: #292d3f;
+    --webpilot-theme-content-background-color: #323558;
+    --webpilot-theme-baseline-text: #fff;
+    --webpilot-theme-main-background-shadow: rgb(84 132 181 / 20%);
+
+    // --webpilot-theme-brand-primary: #5e80ff;
+    --webpilot-theme-brand-primary: #fff;
+    --webpilot-theme-stoke-and-hover-status: #585c8a;
+    --webpilot-theme-brightness-number: 3;
+    --webpilot-theme-invert-number: 1;
+  }
+  #webpilot-content {
+    p {
+    color: #dcdcdc;
+    }
+    li {
+      color: #dcdcdc;
+    }
+    code {
+      background: #002b36;
+      color: #839496;
+    }
+  }
+  #webpilot-template {
+    @import './solarized_dark.scss';
+  }
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webpilot",
-  "version": "0.9.1030",
+  "version": "0.9.1102",
   "author": "webpilot.ai",
   "displayName": "Webpilot - Copilot for All, Free & Open",
   "description": "__MSG_extensionDescription__",

diff --git a/scripts/i18n/gettextOutput/messages.pot b/scripts/i18n/gettextOutput/messages.pot
@@ -15,6 +15,13 @@ msgstr ""
 msgid "Active Webpilot"
 msgstr ""
 
+#: src/components/PromptMenu.vue:12
+#: src/components/PromptMenu.vue:13
+#: src/components/PromptMenu.vue:18
+#: src/components/PromptMenu.vue:22
+msgid "Add a new prompt"
+msgstr ""
+
 #: src/tabs/components/StepFour.vue:4
 #: src/tabs/components/StepFour.vue:5
 #: src/tabs/components/StepFour.vue:6
@@ -36,9 +43,9 @@ msgstr ""
 
 #: src/components/FloatControlButtons.vue:20
 #: src/components/FloatControlButtons.vue:21
-#: src/components/PromptMenu.vue:14
-#: src/components/PromptMenu.vue:15
+#: src/components/PromptMenu.vue:19
 #: src/components/PromptMenu.vue:20
+#: src/components/PromptMenu.vue:29
 msgid "Back"
 msgstr ""
 
@@ -52,9 +59,9 @@ msgstr ""
 msgid "Change Shortcut"
 msgstr ""
 
-#: src/components/PromptMenu.vue:17
-#: src/components/PromptMenu.vue:18
+#: src/components/PromptMenu.vue:22
 #: src/components/PromptMenu.vue:23
+#: src/components/PromptMenu.vue:32
 msgid "Choose"
 msgstr ""
 
@@ -70,15 +77,15 @@ msgstr ""
 
 #: src/components/FloatControlButtons.vue:10
 #: src/components/FloatControlButtons.vue:9
-#: src/components/PromptMenu.vue:14
-#: src/components/PromptMenu.vue:15
+#: src/components/PromptMenu.vue:19
 #: src/components/PromptMenu.vue:20
+#: src/components/PromptMenu.vue:29
 msgid "Close"
 msgstr ""
 
-#: src/components/PromptMenu.vue:19
-#: src/components/PromptMenu.vue:20
+#: src/components/PromptMenu.vue:24
 #: src/components/PromptMenu.vue:25
+#: src/components/PromptMenu.vue:34
 msgid "Confirm"
 msgstr ""
 
@@ -265,7 +272,7 @@ msgstr ""
 msgid "Webpilot Credit"
 msgstr ""
 
-#: src/tabs/components/StepThree.vue:32
+#: src/tabs/components/StepThree.vue:33
 msgid "Webpilot will answer based on the current page if no text is selected"
 msgstr ""
 

diff --git a/scripts/i18n/gettextOutput/translations.json b/scripts/i18n/gettextOutput/translations.json
@@ -2,6 +2,7 @@
   "en": {
     " to use": " to use",
     "Active Webpilot": "Active Webpilot",
+    "Add a new prompt": "Add a new prompt",
     "and pin Webpilot to your nav bar": "and pin Webpilot to your nav bar",
     "API Settings": "API Settings",
     "Ask a question about": "Ask a question about",

diff --git a/src/components/PromptEditor.vue b/src/components/PromptEditor.vue
@@ -227,7 +227,8 @@ const onNameInputBlur = () => {
   color: var(--webpilot-theme-main-text-color, #292929);
   font-weight: 600 !important;
   font-size: 12px !important;
-  line-height: 20px;
+
+  // line-height: 20px;
   background-color: var(--webpilot-theme-content-background-color, #fff);
   border: 0 !important;
   outline: none;

diff --git a/src/components/PromptInput.vue b/src/components/PromptInput.vue
@@ -107,8 +107,10 @@ const placeholderText = computed(() => {
   return `${$gettext('Ask a question about')} "${props.selectedText}"`
 })
 const showSavePrompt = computed(() => {
-  if (!props.showCollect) return false
-  return props.prompts.every(v => v.command !== props.modelValue)
+  // save prompt button is deprecated
+  return false
+  // if (!props.showCollect) return false
+  // return props.prompts.every(v => v.command !== props.modelValue)
 })
 
 const handleSend = () => {

diff --git a/src/components/PromptMenu.vue b/src/components/PromptMenu.vue
@@ -13,6 +13,15 @@
           <InteractiveIcon type="pencil" />
         </div>
       </li>
+      <li
+        :key="prompts.length"
+        :class="[$style.item, {[$style['item--activate']]: tabIndex === prompts.length}]"
+        @mouseover="() => handleHoverPrompt(prompts.length)"
+      >
+        <h2 :class="$style.increase" @click="handleCreatePrompt">
+          + {{ $gettext('Add a new prompt') }}
+        </h2>
+      </li>
     </ol>
     <article :class="$style.footer">
       <span :class="$style.keys">Esc</span>
@@ -36,7 +45,13 @@ import {$gettext} from '@/utils/i18n'
 
 import InteractiveIcon from './InteractiveIcon/InteractiveIcon.vue'
 
-const emits = defineEmits(['onChange', 'onEditPrompt', 'onAddPrompt', 'onMouseOver'])
+const emits = defineEmits([
+  'onChange',
+  'onEditPrompt',
+  'onAddPrompt',
+  'onMouseOver',
+  'onCreatePrompt',
+])
 const props = defineProps({
   prompts: {
     type: Array,
@@ -68,6 +83,10 @@ const handleHoverPrompt = index => {
   emits('onMouseOver', {index})
 }
 
+const handleCreatePrompt = () => {
+  emits('onCreatePrompt')
+}
+
 const handleEditPrompt = index => {
   emits('onEditPrompt', {
     index,
@@ -141,6 +160,15 @@ const handleEditPrompt = index => {
     white-space: nowrap;
     text-overflow: ellipsis;
   }
+
+  .increase {
+    width: 100%;
+    margin: 0;
+    padding: 8px 0;
+    color: var(--webpilot-theme-main-text-color, #292929);
+    font-size: 14px;
+    line-height: 22px;
+  }
 }
 
 .item--activate {

diff --git a/src/csui/Index/TheEntry.vue b/src/csui/Index/TheEntry.vue
@@ -30,8 +30,10 @@
 
 <script setup>
 import {computed, ref, watch} from 'vue'
-import '@assets/styles/csui-reset.scss'
-import '@assets/styles/csui-theme.scss'
+// import '@assets/styles/csui-reset.scss'
+// import '@assets/styles/csui-theme.scss'
+import '@assets/styles/reset.scss'
+import '@assets/styles/themes.scss'
 
 import {onClickOutside, useMagicKeys} from '@vueuse/core'
 

diff --git a/src/csui/Index/ThePopupBox/ThePopupBox.vue b/src/csui/Index/ThePopupBox/ThePopupBox.vue
@@ -39,6 +39,7 @@
       :show-back="showMenu"
       :tab-index="chooseIndex"
       @on-change="handleChangePrompt"
+      @on-create-prompt="handleCreatePrompt"
       @on-edit-prompt="handleEditPrompt"
       @on-mouse-over="handleHoverPrompt"
     />
@@ -126,23 +127,27 @@ useMagicKeys({
     if (!showPrompts.value) return
     const oldIndex = chooseIndex.value
     const {length} = currentPromptsList.value
-    if (e.key === 'ArrowUp' && e.type === 'keyup') {
-      e.preventDefault()
-      const newIndex = oldIndex - 1 < 0 ? length - 1 : oldIndex - 1
+    // when the index equals the array length, it indicates that the create prompt button is selected
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') e.preventDefault()
+    if (e.type !== 'keyup') return
+    console.log(`%c${e.key}`, 'color:dodgerblue', oldIndex)
+    if (e.key === 'ArrowUp') {
+      const newIndex = oldIndex - 1 < 0 ? length : oldIndex - 1
       chooseIndex.value = newIndex
-      inputCommand.value = currentPromptsList.value[newIndex].command
+      inputCommand.value = oldIndex - 1 < 0 ? '' : currentPromptsList.value[newIndex].command
     }
-    if (e.key === 'ArrowDown' && e.type === 'keyup') {
-      e.preventDefault()
-      const newIndex = oldIndex + 1 >= length ? 0 : oldIndex + 1
+    if (e.key === 'ArrowDown') {
+      const newIndex = oldIndex + 1 > length ? 0 : oldIndex + 1
       chooseIndex.value = newIndex
-      inputCommand.value = currentPromptsList.value[newIndex].command
+      inputCommand.value = oldIndex + 1 === length ? '' : currentPromptsList.value[newIndex].command
     }
-    if (e.key === 'Enter' && e.type === 'keyup') {
-      e.preventDefault()
+    if (e.key === 'Enter') {
       if (oldIndex === -1) popUpAskAi()
+      else if (oldIndex === length) handleCreatePrompt()
       else handleChangePrompt({index: oldIndex, prompt: currentPromptsList.value[oldIndex]})
+      e.preventDefault()
     }
+    console.log(`%c${length}`, 'color:deepskyblue', chooseIndex.value)
   },
 })
 
@@ -398,6 +403,10 @@ const handleDeletePrompt = () => {
   handleCloseEditor()
 }
 
+const handleCreatePrompt = () => {
+  handleShowEditor()
+}
+
 const handleAddPrompt = command => {
   selectedPrompt.index = currentPromptsList.value ? currentPromptsList.value.length : 0
   selectedPrompt.prompt = {title: '', command}