From ae32bd46119867c9b4248ab064cc46b9423602b0 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Thu, 4 Sep 2025 21:02:10 +0200
Subject: [PATCH 1/2] feat(custom/bubble): Add toggle to disable AI chat bubble
 styles for Deepseek compatibility

- Add a toggle option in the settings to disable custom AI chat bubble styles
- Allow users to revert AI chat bubbles to match the default Deepseek style
- Ensure the toggle dynamically applies or removes custom styles based on user preference

Changes summary:
- Added a new toggle in the settings that allows users to disable custom AI chat bubble styles. When toggled off, the AI chat bubbles will match the default Deepseek style, providing users with more flexibility to customize their chat experience.
---
 components/Custom/Layouts/Toggles.vue | 17 ++++++++++++++++-
 styles/customs/_custom-toggles.scss   |  6 ++++++
 utils/storage.js                      |  2 ++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/components/Custom/Layouts/Toggles.vue b/components/Custom/Layouts/Toggles.vue
index 0018f53..0159f9c 100644
--- a/components/Custom/Layouts/Toggles.vue
+++ b/components/Custom/Layouts/Toggles.vue
@@ -7,11 +7,18 @@
 			:iconComponent="IconThinkingProcess"
 			tooltip="<strong>NOTE</strong>: Clicking on the thought process element won't reveal it again. Only toggling this setting can restore it."
 		/>
+
+		<CardToggle
+			v-model="toggleBubbleAI"
+			title="Turn off AI Bubble"
+			subtitle="Turn off the AI bubbles style to match the default Deepseek look and feel."
+			:iconComponent="IconThinkingProcess"
+		/>
 	</div>
 </template>
 
 <script setup>
-import { hideThinkingItem } from '@/utils/storage'
+import { hideThinkingItem, toggleBubbleAIItem } from '@/utils/storage'
 import { useToggleStorage } from '@/composables/useToggleStorage.js'
 
 import CardToggle from '@/components/Cards/Toggle.vue'
@@ -19,4 +26,12 @@ import IconThinkingProcess from '@/components/Icons/ThinkingProcess.vue'
 
 // One toggle controls everything
 const hideThinkingState = useToggleStorage(hideThinkingItem, 'dsx-toggle-thinking-process')
+const toggleBubbleAI = useToggleStorage(toggleBubbleAIItem, 'dsx-no-ai-bubble')
 </script>
+
+<style lang="scss">
+.layouts-toggles {
+	display: grid;
+	gap: 0.5rem;
+}
+</style>
diff --git a/styles/customs/_custom-toggles.scss b/styles/customs/_custom-toggles.scss
index af6dff3..b92d30c 100644
--- a/styles/customs/_custom-toggles.scss
+++ b/styles/customs/_custom-toggles.scss
@@ -12,4 +12,10 @@ html[dsx-toggle-accent-user-bubble] {
             @include bg-accent-inverse;
         }
     }
+}
+
+html[dsx-no-ai-bubble] {
+    ._4f9bf79 {
+        background: transparent !important;
+    }
 }
\ No newline at end of file
diff --git a/utils/storage.js b/utils/storage.js
index 169efaf..99f0c85 100644
--- a/utils/storage.js
+++ b/utils/storage.js
@@ -48,6 +48,7 @@ const STORAGE_CONFIG = Object.freeze({
 		maxWidthChatsItem: { key: 'local:maxWidthChats', fallback: { value: DEFAULT_MAX_WIDTH, unit: 'px' } },
 		maxWidthTextareaItem: { key: 'local:maxWidthTextarea', fallback: { value: DEFAULT_MAX_WIDTH, unit: 'px' } },
 		hideThinkingItem: { key: 'local:hideThinking', fallback: false },
+		toggleBubbleAIItem: { key: 'local:toggleGptBubble', fallback: false },
 	},
 })
 
@@ -80,4 +81,5 @@ export const {
 	maxWidthTextareaItem,
 	hideThinkingItem,
 	accentUserBubbleItem,
+	toggleBubbleAIItem,
 } = storageItems

From 778b7ee084b0f5a80907da30310133e12fd62b96 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Thu, 4 Sep 2025 21:09:44 +0200
Subject: [PATCH 2/2] feat(custom/bubble): Add bubble disabled icon to toggle
 button card

---
 components/Custom/Layouts/Toggles.vue |  7 ++++---
 components/Icons/BubbleOFF.vue        | 21 +++++++++++++++++++++
 styles/customs/_custom-toggles.scss   |  2 +-
 3 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 components/Icons/BubbleOFF.vue

diff --git a/components/Custom/Layouts/Toggles.vue b/components/Custom/Layouts/Toggles.vue
index 0159f9c..0bd2c6a 100644
--- a/components/Custom/Layouts/Toggles.vue
+++ b/components/Custom/Layouts/Toggles.vue
@@ -11,8 +11,8 @@
 		<CardToggle
 			v-model="toggleBubbleAI"
 			title="Turn off AI Bubble"
-			subtitle="Turn off the AI bubbles style to match the default Deepseek look and feel."
-			:iconComponent="IconThinkingProcess"
+			subtitle="Turn off the AI bubble style to match the default Deepseek look and feel."
+			:iconComponent="IconBubbleOFF"
 		/>
 	</div>
 </template>
@@ -23,10 +23,11 @@ import { useToggleStorage } from '@/composables/useToggleStorage.js'
 
 import CardToggle from '@/components/Cards/Toggle.vue'
 import IconThinkingProcess from '@/components/Icons/ThinkingProcess.vue'
+import IconBubbleOFF from '@/components/Icons/BubbleOFF.vue'
 
 // One toggle controls everything
 const hideThinkingState = useToggleStorage(hideThinkingItem, 'dsx-toggle-thinking-process')
-const toggleBubbleAI = useToggleStorage(toggleBubbleAIItem, 'dsx-no-ai-bubble')
+const toggleBubbleAI = useToggleStorage(toggleBubbleAIItem, 'dsx-toggle-ai-bubble')
 </script>
 
 <style lang="scss">
diff --git a/components/Icons/BubbleOFF.vue b/components/Icons/BubbleOFF.vue
new file mode 100644
index 0000000..02988b7
--- /dev/null
+++ b/components/Icons/BubbleOFF.vue
@@ -0,0 +1,21 @@
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="icon icon-tabler icons-tabler-outline icon-tabler-bubble-x"
+	>
+		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+		<path
+			d="M13.5 18.75c-.345 .09 -.727 .25 -1.1 .25a4.3 4.3 0 0 1 -1.57 -.298l-3.83 2.298v-3.134a2.668 2.668 0 0 1 -1.795 -3.773a4.8 4.8 0 0 1 2.908 -8.933a5.335 5.335 0 0 1 9.194 1.078a5.333 5.333 0 0 1 4.484 6.778"
+		/>
+		<path d="M22 22l-5 -5" />
+		<path d="M17 22l5 -5" />
+	</svg>
+</template>
diff --git a/styles/customs/_custom-toggles.scss b/styles/customs/_custom-toggles.scss
index b92d30c..fcbd449 100644
--- a/styles/customs/_custom-toggles.scss
+++ b/styles/customs/_custom-toggles.scss
@@ -14,7 +14,7 @@ html[dsx-toggle-accent-user-bubble] {
     }
 }
 
-html[dsx-no-ai-bubble] {
+html[dsx-toggle-ai-bubble] {
     ._4f9bf79 {
         background: transparent !important;
     }