fix(canvas/chats): ensure chat bubbles design is consistent in all sc…

…enarios (#86)

- Update the `[data-message-author-role='assistant']` selector to target GPT chat bubbles with `.agent-turn`
- Ensure chat bubbles maintain their design when editing is stopped or when there is only one line in the chat bubble
- This was specially noticable and not so pleasent in =< `md` bp when canvas is opened or in smaller screen sizes

Changes summary:
    - Fixed the issue where chat bubbles did not have the correct design in certain scenarios, such as when editing is stopped or when there is only one line in the chat bubble, by updating the selector to target GPT chat bubbles with `.agent-turn`.

src/sass/elements/_right--main.scss

@@ -257,7 +257,10 @@ main [role='presentation'] {
 	}
 
 	/* @ RIGHT - CHATS BUBBLES - GPT */
-	&:has([data-message-author-role='assistant']) {
+	// &:has([data-message-author-role='assistant']) {
+	// ! I HAVE TO CHANGE THE ASSISTENT SELECTOR to ".agent-turn" BCS IT DOESNT EXIST AT SOME SCENARIOS (e.g. when there is canvas only ([id^="textdoc-message"]), without markdown too, when the user stop py Code canvas editing, etc...
+	&:has(.agent-turn) {
+		// border: 2px solid red !important;
 
 		/* ! Without this there was strange issue with User's chat overlaping the menu for "GPT-4" or "GPT-3.5" to choose model in gpt's chat bubble' footer - ONLY FOR MOBILE which is even more strange!!! 
 		Ako neogranicimo ovo samo za mobile, na desktopu ce GPT chat da ide preko sticky headera!! Dok je u mobile ok valjda */
@@ -268,9 +271,10 @@ main [role='presentation'] {
 		}
 
 		/*   RIGHT - CHATS BUBBLE BG 
-		- Adding .markdown here fix flash background of user chat bubble on first message */
-		// & > div.text-base > div[class*="xl:max-w-[48rem]"] {
-		& > div.text-base > div:first-child:has(.markdown) {
+		& > div.text-base > div[class*="xl:max-w-[48rem]"] { // ovo ne moze jer za mobile nema ove klase vec samo md:max-w-3xl
+		& > div.text-base > div[class*="md:max-w-3xl"] {
+		// ? Adding .markdown here fix flash background of user chat bubble on first message */
+		& > div.text-base > div:first-child:has(.markdown, [id^="textdoc-message"]) {
 
 			--pt-multiplier: 1.3;
 			background-color: var(--c-bg-msg-gpt);
@@ -537,46 +541,4 @@ body > .fixed.top-8.right-4 {
 		--text-primary: var(--c-on-accent) !important;
 		border-color: var(--c-accent) !important;
 	}
-}
-
-
-// @container article (max-width: $sm) {
-
-// 	[data-testid^='conversation-turn-'] {
-
-// 		& > div {
-// 			--px-chat-bubble-edge-gap: 0.4rem !important;
-// 		}
-
-// 		.mx-auto.flex.flex-1.text-base[class*="md:max-w-3xl"] {
-// 			--p-chat-bubble: 0.5rem !important;
-// 			--br-chat-bubble: var(--br) !important;
-// 			// background-color: red !important;
-// 			// border: 4px solid orange !important;
-// 			width: 100% !important;
-
-// 			.flex-shrink-0.flex.flex-col.items-end:has(.gizmo-bot-avatar, .gizmo-shadow-stroke) {
-// 				// background-color: red !important;
-// 				display: none !important;
-// 			}
-
-// 		}
-
-// 		&:has([data-message-author-role='user']) [class*='bg-token-message-surface'] {
-// 			width: 100% !important;
-// 			max-width: 100% !important;
-// 		}
-
-// 		&:has([data-message-author-role='assistent']) {
-// 			border: 2px solid red !important;
-// 		}
-
-// 	}
-
-// 	[data-testid^="conversation-turn-"]:has([data-message-author-role="assistant"]) > div.text-base > div:first-child:has(.markdown) .agent-turn.relative.flex.w-full.flex-col {
-// 		width: 100% !important;
-// 		border: 2px solid red !important;
-
-// 	}
-
-// }
+}