Updated DOM structure related to conversation starters

nlkitai · Jun 2, 2024 · e828efc · e828efc
1 parent bdffe50
commit e828efc
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 26 deletions.
diff --git a/packages/css/themes/src/common/components/ConversationStarters.css b/packages/css/themes/src/common/components/ConversationStarters.css
@@ -1,4 +1,4 @@
-.nlux-comp-conversationStarters-container {
+.nlux-conversationStarters-container {
     overflow-y: scroll;
 
     > .nlux-comp-conversationStarters {

diff --git a/packages/css/themes/src/common/layout.css b/packages/css/themes/src/common/layout.css
@@ -35,6 +35,10 @@
             overflow-y: auto;
             flex: 1;
             padding: var(--nlux-chtr--pdng) var(--nlux-chtr--pdng) var(--nlux-dvr--mrgBtm) var(--nlux-chtr--pdng);
+
+            > .nlux-conversationStarters-container:empty {
+                display: none;
+            }
         }
 
         > .nlux-composer-container {

diff --git a/packages/js/core/src/sections/chat/conversation/conversation.render.ts b/packages/js/core/src/sections/chat/conversation/conversation.render.ts
@@ -39,10 +39,10 @@ export const renderConversation: CompRenderer<
     segmentsContainer.classList.add('nlux-chatSegments-container');
 
     const conversationStartersContainer = document.createElement('div') as HTMLElement;
-    conversationStartersContainer.classList.add('nlux-comp-conversationStarters-container');
+    conversationStartersContainer.classList.add('nlux-conversationStarters-container');
 
-    appendToRoot(segmentsContainer);
     appendToRoot(conversationStartersContainer);
+    appendToRoot(segmentsContainer);
 
     //
     // Create welcome message container
@@ -63,7 +63,7 @@ export const renderConversation: CompRenderer<
         }
 
         if (renderingContext.welcomeMessageContainer) {
-            segmentsContainer.insertAdjacentElement('afterend', renderingContext.welcomeMessageContainer);
+            conversationStartersContainer.insertAdjacentElement('beforebegin', renderingContext.welcomeMessageContainer);
         }
     }
 
@@ -94,8 +94,8 @@ export const renderConversation: CompRenderer<
                     : createDefaultWelcomeMessageDom();
 
                 if (renderingContext.welcomeMessageContainer) {
-                    segmentsContainer.insertAdjacentElement(
-                        'afterend',
+                    conversationStartersContainer.insertAdjacentElement(
+                        'beforebegin',
                         renderingContext.welcomeMessageContainer,
                     );
                 }
@@ -120,8 +120,8 @@ export const renderConversation: CompRenderer<
                         : createDefaultWelcomeMessageDom();
 
                     if (renderingContext.welcomeMessageContainer) {
-                        segmentsContainer.insertAdjacentElement(
-                            'afterend',
+                        conversationStartersContainer.insertAdjacentElement(
+                            'beforebegin',
                             renderingContext.welcomeMessageContainer,
                         );
                     }

diff --git a/packages/react/core/src/sections/Conversation/ConversationComp.tsx b/packages/react/core/src/sections/Conversation/ConversationComp.tsx
@@ -74,12 +74,14 @@ export const ConversationComp: ConversationCompType = function <AiMsg>(
                     message={personaOptions!.assistant!.tagline}
                 />
             )}
-            {showConversationStarters && (
-                <ConversationStarters
-                    items={conversationOptions!.conversationStarters ?? []}
-                    onConversationStarterSelected={props.onConversationStarterSelected}
-                />
-            )}
+            <div className="nlux-conversationStarters-container">
+                {showConversationStarters && (
+                    <ConversationStarters
+                        items={conversationOptions!.conversationStarters ?? []}
+                        onConversationStarterSelected={props.onConversationStarterSelected}
+                    />
+                )}
+            </div>
             <div className="nlux-chatSegments-container">
                 {segments.map((segment, index) => {
                     const isLastSegment = index === segments.length - 1;

diff --git a/packages/react/core/src/sections/ConversationStarters/ConversationStarters.tsx b/packages/react/core/src/sections/ConversationStarters/ConversationStarters.tsx
@@ -3,18 +3,16 @@ import {ConversationStartersProps} from './props';
 export const ConversationStarters = (props: ConversationStartersProps) => {
     const {onConversationStarterSelected} = props;
     return (
-        <div className="nlux-comp-conversationStarters-container">
-            <div className="nlux-comp-conversationStarters">
-                {props.items.map((conversationStarter, index) => (
-                    <button
-                        key={index}
-                        className="nlux-comp-conversationStarter"
-                        onClick={() => onConversationStarterSelected(conversationStarter)}
-                    >
-                        {conversationStarter.prompt}
-                    </button>
-                ))}
-            </div>
+        <div className="nlux-comp-conversationStarters">
+            {props.items.map((conversationStarter, index) => (
+                <button
+                    key={index}
+                    className="nlux-comp-conversationStarter"
+                    onClick={() => onConversationStarterSelected(conversationStarter)}
+                >
+                    {conversationStarter.prompt}
+                </button>
+            ))}
         </div>
     );
 };