Revert "[UXE-4942] feat: add Azion Copilot with deepchat to AI Chat c…

…omponent…" (#1785)

This reverts commit 9c0c520.

azion.config.cjs

@@ -255,19 +255,6 @@ const backRules = [
       },
       rewrite: '/webhook/console_feedback'
     }
-  },
-  {
-    name: 'Route Send Message to Copilot',
-    description: 'this router will send the user message to the chatbot',
-    match: '^/ai',
-    behavior: {
-      forwardCookies: true,
-      setOrigin: {
-        name: 'origin-console-ai',
-        type: 'single_origin'
-      },
-      rewrite: '/chat-completions'
-    }
   }
 ]
 
@@ -316,12 +303,6 @@ const AzionConfig = {
       hostHeader: `automate.azion.net`,
       addresses: [`automate.azion.net`]
     },
-    {
-      name: 'origin-console-ai',
-      type: 'single_origin',
-      hostHeader: `ivg5gk272b.map.azionedge.net`,
-      addresses: [`ivg5gk272b.map.azionedge.net`]
-    }
   ],
   rules: {
     request: [...commonRules, ...frontRules, ...backRules],

src/modules/azion-ai-chat/azion-ai-chat-block.vue

@@ -9,8 +9,14 @@
     :textInput="textInputStyles"
     :submitButtonStyles="submitButtonStyles"
     :request="makeRequestConfig()"
-    :requestInterceptor="interceptor"
-    :responseInterceptor="responseInterceptorService"
+    :requestInterceptor="
+      (requestDetails) =>
+        requestInterceptorService(requestDetails, {
+          sessionId: aiAskAzionSessionId,
+          url: currentRouteFullPath,
+          userName: account.name
+        })
+    "
   >
     <div class="deep-chat-temporary-message">
       <div :style="`display:flex;align-items:center;flex-direction:column;gap:2rem;`">
@@ -40,10 +46,7 @@
   import suggestionIconMetrics from './assets/suggestion-icon-metrics.svg?url'
   import suggestionIconSecurity from './assets/suggestion-icon-security.svg?url'
   import AzionAiChatSuggestion from './azion-ai-chat-suggestion.vue'
-  import {
-    requestInterceptorService,
-    responseInterceptorService
-  } from './services/interceptor-service'
+  import { requestInterceptorService } from './services/request-interceptor-service'
   import { loadPromptSuggestion } from './services/load-prompt-suggestions'
   import { makeRequestConfig } from './services/make-request-config'
   import { makeSessionId } from './services/make-session-id'
@@ -52,19 +55,27 @@
   import { useRouter } from 'vue-router'
   import { useAccountStore } from '@/stores/account'
   const { currentRoute } = useRouter()
+  const { account } = useAccountStore()
 
   defineOptions({
     name: 'azion-ai-chat-block'
   })
 
   onMounted(() => {
     generateChatSessionId()
+    getUserNameInfo()
   })
-  const accountStore = ref(null)
+
   const deepChatRef = ref(null)
 
+  defineExpose({
+    deepChatRef
+  })
+
+  const currentRouteFullPath = currentRoute.value.path
   const aiAskAzionSessionId = ref('')
-  const promptOrigin = ref(null)
+  const accountName = ref('')
+
   const errorMessages = ref({
     overrides: {
       default: 'Connection failed. Try sending your message again.'
@@ -287,55 +298,26 @@
   const handleSubmitSuggestion = (promptText) => {
     deepChatRef.value.submitUserMessage({ text: promptText })
   }
-
   const generateChatSessionId = () => {
     aiAskAzionSessionId.value = makeSessionId()
   }
-
-  const submitUserMessageGetHelp = ({ user, system }) => {
-    promptOrigin.value = {
-      user_prompt: user,
-      system_prompt: system
-    }
-    deepChatRef.value.submitUserMessage({ text: user })
+  const getUserNameInfo = () => {
+    accountName.value = account.name
   }
 
   const calculateIconBySuggestionIndex = (index) => {
     return index === 0 ? suggestionIconMetrics : suggestionIconSecurity
   }
 
-  const interceptor = (requestDetails) => {
-    requestInterceptorService(requestDetails, {
-      sessionId: aiAskAzionSessionId.value,
-      url: currentRoute.value.path,
-      userName: accountStore.value.name,
-      clientId: accountStore.value.client_id,
-      prompt: promptOrigin.value,
-      allMessage: deepChatRef.value.getMessages()
-    })
-  }
-
   const loadPromptSuggestionWithRoleDecorator = (role) => {
     suggestionsOptions.value = loadPromptSuggestion(role)
   }
 
   watchEffect(() => {
-    const { account } = useAccountStore()
-
-    accountStore.value = account
-
-    loadPromptSuggestionWithRoleDecorator(accountStore.value.jobRole)
-  })
-
-  const clearMessages = () => {
-    deepChatRef.value.clearMessages()
-    promptOrigin.value = null
-  }
+    const {
+      account: { jobRole }
+    } = useAccountStore()
 
-  defineExpose({
-    deepChatRef,
-    clearMessages,
-    submitUserMessageGetHelp
+    loadPromptSuggestionWithRoleDecorator(jobRole)
   })
 </script>
-./services/interceptor-service

src/modules/azion-ai-chat/azion-ai-get-help.vue

@@ -1,31 +1,11 @@
 <script setup>
   import PrimeButton from 'primevue/button'
-  import { computed } from 'vue'
 
   defineOptions({ name: 'get-help' })
 
   const props = defineProps({
     prompt: {
       type: String
-    },
-    context: {
-      type: Object,
-      default: null
-    }
-  })
-
-  const formatPrompt = computed(() => {
-    if (!props.context) return props.prompt
-
-    const replaceKeys = (text) => {
-      return Object.keys(props.context).reduce((str, key) => {
-        return str.replaceAll(`\${${key}}`, props.context[key])
-      }, text)
-    }
-
-    return {
-      user: replaceKeys(props.prompt.user),
-      system: replaceKeys(props.prompt.system)
     }
   })
 </script>
@@ -37,6 +17,6 @@
     label="Get Help"
     icon="ai ai-ask-azion"
     icon-pos="right"
-    v-prompt="formatPrompt"
+    v-prompt="props.prompt"
   />
 </template>

src/modules/azion-ai-chat/contextual-prompts/domains/index.js

@@ -4,46 +4,13 @@
  * @typedef {Object} DomainPrompts
  * @property {string} create.general - Prompt for providing detailed instructions for each field in the domain creation form.
  * @property {string} create.settings - Prompt for explaining the use of the CNAME field and the CNAME Access Only option, and describing the differences between the digital certificate options.
- * @property {string} create.authentication - Prompt for explaining the use of the Mutual Authentication Settings.
- * @property {string} edit.general - Prompt for providing detailed instructions for each field in the domain edition form.
- * @property {string} edit.settings - Prompt for explaining the editing and managing of the CNAME field and the CNAME Access Only option, and describing the differences between the digital certificate options.
- * @property {string} edit.authentication - Prompt for explaining the editing and managing of the Mutual Authentication Settings.
-
-*/
+ */
 
 export default {
   create: {
-    general: {
-      system:
-        'You are a technical writer providing help to users on the Azion platform. Assist the user in creating and configuring a new domain to link to an edge application. Provide a detailed, step-by-step guide for setting up each field in the domain creation form, referencing Azion documentation and contextual, on-screen information. Organize the response into main steps or tasks, if possible. Include examples, best practices, and any relevant information to ensure proper configuration. Add related links and sources at the end of the response. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
-      user: 'I want to create a new domain with Azion and link it to an edge application. I need a step-by-step guide on configuring my new domain, including detailed instructions for each field in the domain creation form.'
-    },
-    settings: {
-      system:
-        'You are a technical writer providing help to users on the Azion platform. Assist the user in understanding the purpose of CNAMEs when creating a new domain linked to an edge application, how to list them to associate with the Azion domain, and the differences between digital certificate options. Provide a detailed explanation to help the user choose the best option for their needs, referencing Azion documentation and contextual, on-screen information. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
-      user: 'I am creating a new domain with Azion Console. While linking it to an edge application, I want to better understand CNAMEs, how to list them to associate with the Azion domain, and the differences between digital certificate options to choose the best one for my needs.'
-    },
-    authentication: {
-      system:
-        'You are a technical writer providing help to users on the Azion platform. Assist the user in understanding the Mutual Authentication Settings when creating a new domain. Explain how enabling it can benefit the user, providing a detailed guide that includes best practices and examples. Reference Azion documentation and contextual, on-screen information. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
-      user: 'I am creating a new domain with Azion Console. While configuring the main settings, I want to learn more about Mutual Authentication Settings and how enabling it can benefit me.'
-    }
-  },
-  edit: {
-    general: {
-      system:
-        'You are a technical writer providing help to users on the Azion platform. Assist the user in editing and managing an existing domain. Provide a detailed, step-by-step guide for modifying each field in the domain editing form, referencing Azion documentation and contextual, on-screen information. Organize the response into main steps or tasks, if possible. Include examples, best practices, and any relevant information to ensure proper reconfiguration. Add related links and sources at the end of the response. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
-      user: 'I want to edit one of my domains on Azion. Provide a step-by-step guide on how to edit the main settings in the domain editing form'
-    },
-    settings: {
-      system:
-        'You are a technical writer providing help to users on the Azion platform. Assist the user in editing and managing the CNAME field and the CNAME Access Only option for an existing domain. Provide an overview of the differences between digital certificate options and guide the user on how to edit these settings effectively to avoid issues later. Reference Azion documentation and contextual, on-screen information. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
-      user: 'I am editing one of my domains on Azion and need an overview of CNAMEs, how to list them to associate with the Azion domain, and the differences between digital certificate options. Help me edit these settings in the best way to avoid issues later.'
-    },
-    authentication: {
-      system:
-        'You are a technical writer providing help to users on the Azion platform. Assist the user in managing the Mutual Authentication Settings for an existing domain. Provide guidance that includes best practices and examples, referencing Azion documentation and contextual, on-screen information. Use technical terms where necessary, but prioritize plain, direct, and simple language. Write in American English, using a conversational tone with contractions, and address the user directly with "you".',
-      user: 'I am editing the main settings for one of my domains on Azion and would like guidance on managing the Mutual Authentication Settings, including some best practices.'
-    }
+    general:
+      'Please assist me in creating a domain. Provide detailed instructions for each field in the domain creation form.',
+    settings:
+      'Please explain the use of the CNAME field and the CNAME Access Only option. Additionally, describe the differences between the digital certificate options.'
   }
 }

src/modules/azion-ai-chat/contextual-prompts/index.js

@@ -1,4 +1,3 @@
 import DomainsPrompts from './domains'
-import Generic from './generic'
 
-export { DomainsPrompts, Generic }
+export { DomainsPrompts }

src/modules/azion-ai-chat/index.vue

@@ -33,15 +33,11 @@
 
     <div
       class="h-full flex justify-between flex-col"
-      v-if="isChatMobile"
+      :key="renderCount"
     >
-      <AzionAiChat
-        :key="renderCount"
-        ref="azionAiChatRef"
-      />
+      <AzionAiChat ref="azionAiChatRef" />
     </div>
     <Sidebar
-      v-else
       :visible="isChatAiOpen"
       position="bottom"
       headerContent="Copilot"
@@ -57,6 +53,7 @@
         <div class="flex items-center justify-between">
           <h2 class="flex items-center gap-2">
             Copilot
+
             <PrimeTag
               class="ml-2"
               value="Experimental"
@@ -113,12 +110,11 @@
 
   import { useAzionAiChatStore } from '@/stores/azion-ai-chat-store'
   import { updateSessionId } from './services/make-session-id'
-  import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+  import { computed, onMounted, onUnmounted, ref } from 'vue'
   import hljs from 'highlight.js'
   import { AZION_MESSAGE_TYPE } from '@modules/azion-ai-chat/directives/custom-ai-prompt'
   import { useRouter } from 'vue-router'
   import { windowOpen } from '@/helpers'
-  import { useWindowSize } from '@vueuse/core'
 
   defineOptions({
     name: 'azion-ai-chat-root-block'
@@ -127,10 +123,6 @@
   const azionAiChatMobileRef = ref(null)
   const renderCount = ref(1)
   const router = useRouter()
-  const { width } = useWindowSize()
-  const currentWidth = ref(width.value)
-  const SCREEN_BREAKPOINT_MD = 768
-
   onMounted(() => {
     window.addEventListener('message', aiCustomPromptListenerHandler)
     addSupportToHljs()
@@ -140,10 +132,6 @@
     window.removeEventListener('message', aiCustomPromptListenerHandler)
   })
 
-  const isChatMobile = computed(() => {
-    return currentWidth.value > SCREEN_BREAKPOINT_MD
-  })
-
   const azionAiChatStore = useAzionAiChatStore()
   const isChatAiOpen = computed(() => {
     return azionAiChatStore.isOpen
@@ -160,34 +148,24 @@
   }
 
   const handleClearChat = () => {
-    updateChatRenderInstance()
-    azionAiChatRef?.value?.clearMessages()
-    azionAiChatMobileRef?.value?.clearMessages()
+    azionAiChatRef?.value.deepChatRef.clearMessages()
+    azionAiChatMobileRef?.value.deepChatRef.clearMessages()
     updateSessionId()
+    updateChatRenderInstance()
   }
 
   const aiCustomPromptListenerHandler = (event) => {
-    handleClearChat()
-    setTimeout(() => {
-      if (event.data.type === AZION_MESSAGE_TYPE) {
-        azionAiChatStore.open()
-        azionAiChatRef?.value?.submitUserMessageGetHelp(event.data.prompt)
-
-        azionAiChatMobileRef?.value?.submitUserMessageGetHelp(event.data.prompt)
-      }
-    }, 100)
+    if (event.data.type === AZION_MESSAGE_TYPE) {
+      azionAiChatStore.open()
+      azionAiChatRef?.value.deepChatRef.submitUserMessage({ text: event.data.prompt })
+      setTimeout(() => {
+        azionAiChatMobileRef?.value.deepChatRef.submitUserMessage({ text: event.data.prompt })
+      }, 100)
+    }
   }
 
   const openChatInNewTab = () => {
     const url = `${window.location.origin}${router.resolve({ name: 'copilot' }).path}`
     windowOpen(url, '_blank')
   }
-
-  watch(
-    width,
-    () => {
-      currentWidth.value = width.value
-    },
-    { immediate: true }
-  )
 </script>