From d81e76b58f426c4dfd47cad540ee15a1d3694ad3 Mon Sep 17 00:00:00 2001
From: signalprime <15487280+signalprime@users.noreply.github.com>
Date: Sat, 15 Jul 2023 07:39:53 -0500
Subject: [PATCH] Update DiscussionsView.vue for Import Dropdown

Convert the existing import button into a dropdown menu with both "LOLLMS" and "ChatGPT" options:

1. Replace the button with a `<div>` that will become the dropdown trigger. Add a click listener to toggle the menu open/closed:

```html
<div @click="toggleDropdown" class="text-2xl hover:text-secondary duration-75">
  <i data-feather="log-in"></i>
</div>
```

2. Add `toggleDropdown` method and `isOpen` data property:

```js
data() {
  return {
    isOpen: false
  }
},

methods: {
  toggleDropdown() {
    this.isOpen = !this.isOpen;
  }
}
```

3. Add the actual dropdown menu markup that shows conditionally based on `isOpen`:

```html
<div v-if="isOpen" class="dropdown">
  <button @click="importDiscussions">LOLLMS</button>
  <button @click="importChatGPT">ChatGPT</button>
</div>
```

4. Implement the `importChatGPT` method:

```js
methods: {
  importChatGPT() {
    // handle ChatGPT import
  }
}
```
---
 web/src/views/DiscussionsView.vue | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/web/src/views/DiscussionsView.vue b/web/src/views/DiscussionsView.vue
index 29cba877..84657f36 100644
--- a/web/src/views/DiscussionsView.vue
+++ b/web/src/views/DiscussionsView.vue
@@ -51,10 +51,17 @@
                         <i data-feather="database"></i>
                     </button>
                     <input type="file" ref="fileDialog" style="display: none" @change="importDiscussions" />
-                    <button class="text-2xl hover:text-secondary duration-75 active:scale-90 rotate-90"
-                        title="Import discussions" type="button" @click.stop="$refs.fileDialog.click()">
-                        <i data-feather="log-in"></i>
-                    </button>
+                    <div @click="toggleDropdown" class="text-2xl hover:text-secondary duration-75">
+                          <i data-feather="import"></i>  
+                    </div>
+                    <div @click="toggleDropdown" class="text-2xl hover:text-secondary duration-75">
+                      <i data-feather="log-in"></i>  
+                    </div>
+                    
+                    <div v-if="isOpen" class="dropdown">
+                      <button @click="importDiscussions">LOLLMS</button> 
+                      <button @click="importChatGPT">ChatGPT</button>
+                    </div>
                     <button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Filter discussions"
                         type="button" @click="isSearch = !isSearch" :class="isSearch ? 'text-secondary' : ''">
                         <i data-feather="search"></i>
@@ -348,10 +355,21 @@ export default {
             panelCollapsed: false // left panel collapse
         }
     },
+    data() {
+      return {
+        isOpen: false
+      }
+    },
     methods: {
         togglePanel() {
             this.panelCollapsed = !this.panelCollapsed;
         },
+        toggleDropdown() {
+            this.isOpen = !this.isOpen;
+        },
+        importChatGPT() {
+            // handle ChatGPT import
+        },  
         async api_get_req(endpoint) {
             try {
                 const res = await axios.get("/" + endpoint);
@@ -365,8 +383,6 @@ export default {
                 console.log(error.message, 'api_get_req')
                 return
             }
-
-
         },
         async list_discussions() {
             try {