feat: allow navigation to shortcut setting page and compute WebpilotI…

…nput value changes in real-time

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

src/components/PromptResult.vue

@@ -40,7 +40,7 @@
 
 <script setup>
 import {ref, watch, computed} from 'vue'
-import {sendToBackground} from '@plasmohq/messaging'
+// import {sendToBackground} from '@plasmohq/messaging'
 // import copyToClipboard from 'copy-to-clipboard'
 // import {useToast} from 'vue-toast-notification'
 import Markdown from 'vue3-markdown-it'
@@ -62,6 +62,7 @@ const isAutoScroll = ref(true)
 
 // const toast = useToast()
 
+const emits = defineEmits(['clickShortcut'])
 const props = defineProps({
   modelValue: {
     type: String,
@@ -179,7 +180,8 @@ const onDragEnd = () => {
 }
 
 const openSettingPage = () => {
-  sendToBackground({name: 'openSetting'})
+  // sendToBackground({name: 'openSetting'})
+  emits('clickShortcut')
 }
 const openHomePage = () => {
   window.open('https://webpilot.ai/', '_blank')

src/config.ts

@@ -136,3 +136,9 @@ export const SERVER_TYPE = {
   [SERVER_NAME.OPENAI_PROXY]: 'OpenAI Proxy',
   [SERVER_NAME.AZURE_PROXY]: 'Azure Proxy',
 }
+
+export const OPTIONS_PAGE_TAB_NAME = {
+  ACCOUNT: 'ACCOUNT',
+  EXTENSION: 'EXTENSION',
+  ABOUT: 'ABOUT',
+}

src/csui/Index/ThePopupBox/ThePopupBox.vue

@@ -18,7 +18,7 @@
     /> -->
     <PromptInput
       v-model="inputCommand"
-      :disabled="aiThinking"
+      :disabled="aiThinking || generating"
       :loading="aiThinking"
       :prompts="currentPromptsList"
       :selected-text="store.selectedText"
@@ -32,7 +32,7 @@
     />
     <WebpilotAlert v-if="showError" :class="$style.alert" :tips="errorMessage" type="error" />
     <!-- <ShortcutTips v-if="store.config.showShortcutTips" :show-text-tips="true" tips-text="hello?" /> -->
-    <PromptResult v-model="result" :show-shadow="showMenu" />
+    <PromptResult v-model="result" :show-shadow="showMenu" @click-shortcut="openExtension" />
     <FloatControlButtons
       v-show="!showEditor"
       :result="result"
@@ -68,12 +68,11 @@
 import {computed, onMounted, reactive, ref, watch} from 'vue'
 import {Readability, isProbablyReaderable} from '@mozilla/readability'
 import {Storage} from '@plasmohq/storage'
-
+import {sendToBackground} from '@plasmohq/messaging'
 import {useMagicKeys} from '@vueuse/core'
 import {storeToRefs} from 'pinia'
 
-import {LAST_PROMPT_STORAGE_KEY} from '@/config'
-
+import {LAST_PROMPT_STORAGE_KEY, OPTIONS_PAGE_TAB_NAME} from '@/config'
 // import HeaderPanel from '@/components/HeaderPanel.vue'
 import FloatControlButtons from '@/components/FloatControlButtons.vue'
 import PromptInput from '@/components/PromptInput.vue'
@@ -438,6 +437,11 @@ const handleClosePopup = () => {
 const handlePopupTurnBack = () => {
   showMenu.value = false
 }
+
+const openExtension = () => {
+  storage.set('OPTIONS_PAGE_ACTIVATED_TAB', OPTIONS_PAGE_TAB_NAME.EXTENSION)
+  sendToBackground({name: 'openSetting'})
+}
 </script>
 
 <style lang="scss" module>

src/options/TheEntry.vue

@@ -7,21 +7,21 @@
       </div>
       <div :class="index['logo-only']"><IconLogo /></div>
       <NavItem
-        :activated="activatedTab === TabList.Account"
-        :name="TabList.Account"
+        :activated="activatedTab === OPTIONS_PAGE_TAB_NAME.ACCOUNT"
+        :name="OPTIONS_PAGE_TAB_NAME.ACCOUNT"
         @change="onChangeTab"
       />
       <NavItem
-        :activated="activatedTab === TabList.Extension"
-        :name="TabList.Extension"
+        :activated="activatedTab === OPTIONS_PAGE_TAB_NAME.EXTENSION"
+        :name="OPTIONS_PAGE_TAB_NAME.EXTENSION"
         @change="onChangeTab"
       >
         <template #outline><IconNavExtensionOutline /> </template>
         <template #filled><IconNavExtensionFilled /> </template>
       </NavItem>
       <NavItem
-        :activated="activatedTab === TabList.About"
-        :name="TabList.About"
+        :activated="activatedTab === OPTIONS_PAGE_TAB_NAME.ABOUT"
+        :name="OPTIONS_PAGE_TAB_NAME.ABOUT"
         @change="onChangeTab"
       >
         <template #outline><IconNavAboutOutline /> </template>
@@ -35,19 +35,21 @@
 </template>
 
 <script setup>
-import {computed, ref} from 'vue'
+import {computed, ref, onMounted} from 'vue'
 import {storeToRefs} from 'pinia'
+import {Storage} from '@plasmohq/storage'
 
 import useStore from '@/stores/store'
 
+import {OPTIONS_PAGE_TAB_NAME} from '@/config'
+
 import IconLogo from './images/icon-logo.vue'
 import IconLogoWithText from './images/icon-logo-with-text.vue'
 import IconLogoWithTextDark from './images/icon-logo-with-text-dark.vue'
 import IconNavExtensionFilled from './images/icon-nav-extension-filled.vue'
 import IconNavExtensionOutline from './images/icon-nav-extension-outline.vue'
 import IconNavAboutOutline from './images/icon-nav-about-outline.vue'
 import IconNavAboutFilled from './images/icon-nav-about-filled.vue'
-
 import NavItem from './components/NavItem.vue'
 import AccountView from './views/AccountView.vue'
 import ExtensionView from './views/ExtensionView.vue'
@@ -56,6 +58,7 @@ import AboutView from './views/AboutView.vue'
 // Start setup states check
 const store = useStore()
 const {config} = storeToRefs(store)
+const storage = new Storage()
 
 if (!config.value.isFinishSetup) {
   const signURL = 'https://account.webpilot.ai/'
@@ -66,21 +69,20 @@ if (!config.value.isFinishSetup) {
 }
 // End Setup states check
 
-const TabList = {
-  Account: 'Account',
-  Extension: 'Extension',
-  About: 'About',
-}
-
-const activatedTab = ref(TabList.Account)
-
+const activatedTab = ref(OPTIONS_PAGE_TAB_NAME.ACCOUNT)
+onMounted(async () => {
+  const tabName = await storage.get('OPTIONS_PAGE_ACTIVATED_TAB')
+  if (tabName && Object.keys(OPTIONS_PAGE_TAB_NAME).includes(tabName)) {
+    activatedTab.value = tabName
+    storage.set('OPTIONS_PAGE_ACTIVATED_TAB', null)
+  }
+})
 const onChangeTab = tabName => {
   activatedTab.value = tabName
 }
-
 const currentComponent = computed(() => {
-  if (activatedTab.value === TabList.About) return AboutView
-  if (activatedTab.value === TabList.Extension) return ExtensionView
+  if (activatedTab.value === OPTIONS_PAGE_TAB_NAME.ABOUT) return AboutView
+  if (activatedTab.value === OPTIONS_PAGE_TAB_NAME.EXTENSION) return ExtensionView
   return AccountView
 })
 </script>

src/options/components/NavItem.vue

@@ -2,15 +2,15 @@
   <div :class="[$style['nav-item'], activated ? $style['active-nav'] : null]" @click="onChange">
     <span :class="$style['icon-outline']">
       <slot name="outline">
-        <IconPersonOutline v-if="name === TabList.Account" />
-        <IconAddonOutline v-else-if="name === TabList.Extension" />
+        <IconPersonOutline v-if="name === OPTIONS_PAGE_TAB_NAME.ACCOUNT" />
+        <IconAddonOutline v-else-if="name === OPTIONS_PAGE_TAB_NAME.EXTENSION" />
         <IconAboutOutline v-else />
       </slot>
     </span>
     <span :class="$style['icon-filled']">
       <slot name="filled">
-        <IconPersonFilled v-if="name === TabList.Account" />
-        <IconAddonFilled v-else-if="name === TabList.Extension" />
+        <IconPersonFilled v-if="name === OPTIONS_PAGE_TAB_NAME.ACCOUNT" />
+        <IconAddonFilled v-else-if="name === OPTIONS_PAGE_TAB_NAME.EXTENSION" />
         <IconAboutFilled v-else />
       </slot>
     </span>
@@ -19,19 +19,15 @@
 </template>
 
 <script setup lang="ts">
+import {OPTIONS_PAGE_TAB_NAME} from '@/config'
+
 import IconPersonOutline from '../images/icon-person-outline.vue'
 import IconPersonFilled from '../images/icon-person-filled.vue'
 import IconAddonOutline from '../images/icon-addon-outline.vue'
 import IconAddonFilled from '../images/icon-addon-filled.vue'
 import IconAboutOutline from '../images/icon-about-outline.vue'
 import IconAboutFilled from '../images/icon-about-filled.vue'
 
-const TabList = {
-  Account: 'Account',
-  Extension: 'Extension',
-  About: 'About',
-}
-
 const emits = defineEmits(['change'])
 
 const props = defineProps({

src/options/components/WebpilotInput.vue

@@ -4,7 +4,7 @@
     :class="$style['webpilot-input']"
     :placeholder="placeholder"
     type="text"
-    @change="onChange"
+    @input="onChange"
   />
 </template>