feat(ui): Socket Panel > Client Messages > option to set selected tex…

…t as environment variable

packages/ui/src/components/SocketPanel.vue

@@ -131,21 +131,24 @@
                         <div class="p-0_5rem bc-primary">
                             <div class="d-f flex-jc-sb flex-ai-c">
                                 <div>Messages</div>
-                                <button class="icon" @click="clearMessages(client)">
-                                    <svg
-                                        stroke="currentColor"
-                                        fill="currentColor"
-                                        stroke-width="0"
-                                        viewBox="0 0 1024 1024"
-                                        height="1em"
-                                        width="1em"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                        <path
-                                            d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
-                                        ></path>
-                                    </svg>
-                                </button>
+                                <div class="d-f flex-ai-c">
+                                    <i class="fas fa-code" @mousedown.prevent="setSelectedTextAsEnvironmentVariable" title="Set selected text as environment variable" style="cursor: pointer;"></i>
+                                    <button class="icon" @click="clearMessages(client)">
+                                        <svg
+                                            stroke="currentColor"
+                                            fill="currentColor"
+                                            stroke-width="0"
+                                            viewBox="0 0 1024 1024"
+                                            height="1em"
+                                            width="1em"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                            <path
+                                                d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                                            ></path>
+                                        </svg>
+                                    </button>
+                                </div>
                             </div>
                         </div>
 
@@ -236,9 +239,9 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onBeforeMount, reactive, computed } from 'vue'
+import { nextTick, onBeforeMount, reactive, computed, inject } from 'vue'
 import { Client, ClientPayload, ClientMessage } from './SocketPanel.types'
-import { formatTimestamp, generateId, getObjectPaths } from '@/helpers'
+import { formatTimestamp, generateId, getObjectPaths, setEnvironmentVariable } from '@/helpers'
 import getObjectPathValue from 'lodash.get'
 import Tabs from './Tabs.vue'
 import ioV2 from 'socket.io-client-v2'
@@ -261,9 +264,11 @@ function handleMessageContainerRef(ref: any, clientId: string) {
 
 // Computed
 const store = useStore()
+const activeWorkspace = computed(() => store.state.activeWorkspace)
 const activeTab = computed(() => store.state.activeTab)
 const activeTabEnvironmentResolved = computed(() => store.state.activeTabEnvironmentResolved)
 const sockets = store.state.sockets
+const $toast: { success: (message: string) => void } = inject('$toast')
 
 // Methods
 
@@ -657,6 +662,37 @@ function isClientConnected(client: Client) {
     return false
 }
 
+function getSelectedText() {
+    const selection = window.getSelection()
+
+    if (!selection.rangeCount) {
+        return ''
+    }
+
+    return selection.getRangeAt(0).toString()
+}
+
+async function setSelectedTextAsEnvironmentVariable() {
+    const currentlySelectedText = getSelectedText()
+
+    if(currentlySelectedText === '') {
+        return
+    }
+
+    const environment = activeWorkspace.value.environment ?? {}
+    const currentlyDefinedEnvironmentVariables = Object.keys(environment)
+
+    const environmentVariableName = await (window as any).createPrompt('Select / Enter environment variable name', '', currentlyDefinedEnvironmentVariables)
+
+    if(environmentVariableName === null || environmentVariableName === '') {
+        return
+    }
+
+    setEnvironmentVariable(store, environmentVariableName, currentlySelectedText)
+
+    $toast.success(`Environment variable set: ${environmentVariableName}`)
+}
+
 // Lifecycle Events
 
 onBeforeMount(async() => {