From 5661cd9cde400f8a9422ca81ce0b758bc9d5c3cf Mon Sep 17 00:00:00 2001
From: Zach Dodson <zdodson21@gmail.com>
Date: Thu, 20 Jun 2024 08:39:46 -0400
Subject: [PATCH] minor changes, button hides correctly

---
 elements/chat-agent/chat-agent.js             | 26 +++++++++++++++----
 .../chat-agent/lib/chat-developer-panel.js    |  3 +++
 elements/chat-agent/lib/chat-input.js         | 12 ++++-----
 elements/chat-agent/lib/chat-interface.js     |  6 ++---
 elements/chat-agent/lib/chat-message.js       |  2 +-
 elements/chat-agent/lib/chat-suggestion.js    |  3 +--
 elements/chat-agent/src/chat-agent.js         | 26 +++++++++++++++----
 7 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/elements/chat-agent/chat-agent.js b/elements/chat-agent/chat-agent.js
index 2883268a1a..f134c4485b 100644
--- a/elements/chat-agent/chat-agent.js
+++ b/elements/chat-agent/chat-agent.js
@@ -39,13 +39,14 @@ class ChatAgent extends DDD {
     this.chatLog = [];
     this.engine = "alfred";
     this.isAILoaded = false;
-    this.userName = "guest"; // TODO needs to grab username somehow or default to "guest", saw example in haxcms-site-editor-ui.js
+    this.userName = "guest";
+    this.userPicture = "";
 
 
     // button
     this.buttonIcon = "hax:wizard-hat";
     this.buttonLabel = "Merlin-AI";
-    this.isButtonHidden = false;
+    this.isButtonHidden = false; // TODO remove if unused
 
     // control bar
 
@@ -74,6 +75,13 @@ class ChatAgent extends DDD {
 
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+
+    // code for username and picture possibly found at => elements/haxcms-elements/lib/core/haxcms-editor-builder.js (starting around line 2639)
+    
+  }
+
   // TODO @container queries for screen size differences
   /**
    * LitElement style callback
@@ -209,7 +217,13 @@ class ChatAgent extends DDD {
 
 
     // button
-    
+    if (!this.isInterfaceHidden && this.isFullView) {
+      this.isButtonHidden = true;
+      CHAT_BUTTON.style.display = "none";
+    } else {
+      this.isButtonHidden = false;
+      CHAT_BUTTON.style.display = "block";
+    }
 
     // control bar
 
@@ -227,13 +241,11 @@ class ChatAgent extends DDD {
     }
 
     if (this.isFullView) {
-      CHAT_INTERFACE.setAttribute("full-view", "");
       SITE_BUILDER.style.width = "75%"; // TODO will be changed
       this.developerModeEnabled ? console.info("HAX-DEV-MODE: Interface loaded into full view") : null;
     } else {
       this.developerModeEnabled ? console.info("HAX-DEV-MODE: Interface loaded into standard view") : null;
       SITE_BUILDER.style.width = "100%";
-      CHAT_INTERFACE.removeAttribute("full-view");
     }
 
     // message
@@ -318,6 +330,10 @@ class ChatAgent extends DDD {
         type: String,
         attribute: "username",
       },
+      userPicture: {
+        type: String,
+        attribute: "user-picture",
+      },
 
       // button
       buttonIcon: {
diff --git a/elements/chat-agent/lib/chat-developer-panel.js b/elements/chat-agent/lib/chat-developer-panel.js
index a09f589e07..7df7e41610 100644
--- a/elements/chat-agent/lib/chat-developer-panel.js
+++ b/elements/chat-agent/lib/chat-developer-panel.js
@@ -41,6 +41,7 @@ class ChatDeveloperPanel extends DDD {
           gap: var(--ddd-spacing-1);
           justify-content: space-between;
           align-items: center;
+          flex-wrap: wrap;
         }
 
         .switch-engine-controls {
@@ -63,7 +64,9 @@ class ChatDeveloperPanel extends DDD {
   render() {
     return html`
       <div class="chat-developer-panel-wrapper">
+
         <div class="console-table">
+          <!-- Maybe convert buttons to simple-cta -->
           <button id="console-table-user" @click=${this.handleConsoleTableButton}>
             <div class="button-icon">
               <simple-icon-lite icon="hax:console-line"></simple-icon-lite>
diff --git a/elements/chat-agent/lib/chat-input.js b/elements/chat-agent/lib/chat-input.js
index 7e4d33248d..3970cd73a5 100644
--- a/elements/chat-agent/lib/chat-input.js
+++ b/elements/chat-agent/lib/chat-input.js
@@ -48,8 +48,8 @@ class ChatInput extends DDD {
         }
 
         .send-button {
-          width: var(--ddd-spacing-13);
-          height: var(--ddd-spacing-13);
+          width: 52px;
+          height: 52px;
           border-radius: var(--ddd-radius-circle);
           background-color: var(--data-theme-primary, var(--ddd-primary-1));
           display: flex;
@@ -111,26 +111,24 @@ class ChatInput extends DDD {
       ChatAgentModalStore.userIndex++;
 
       let date = new Date();
-      let dateString = date.toString().replace(/\s/g, '-');
 
       const chatLogObject = {
         messageID: ChatAgentModalStore.messageIndex,
         author: ChatAgentModalStore.userName,
         message: INPUTTED_PROMPT,
         authorMessageIndex: ChatAgentModalStore.userIndex,
-        timestamp: dateString,
+        timestamp: date.toString().replace(/\s/g, '-'),
       }
 
       ChatAgentModalStore.chatLog.push(chatLogObject);
 
-      // TODO ensure message sent to chat log renders via array map in chat-interface.js
+      // TODO ensure message sent to chat log renders via array map in chat-interface.js, probably an update function
+
 
       // TODO Send message to AI for response
 
       this.shadowRoot.querySelector("#user-input").value = "";
 
-      this.requestUpdate();
-
     } else {
       ChatAgentModalStore.developerModeEnabled ? console.info('HAX-DEV-MODE: Send button activated. No prompt to send') : null;
     }
diff --git a/elements/chat-agent/lib/chat-interface.js b/elements/chat-agent/lib/chat-interface.js
index d5984c5a76..1d845d196b 100644
--- a/elements/chat-agent/lib/chat-interface.js
+++ b/elements/chat-agent/lib/chat-interface.js
@@ -72,15 +72,13 @@ class ChatInterface extends DDD {
     }
   }
 
-  // TODO need to dynamically apply attributes "sent-prompt" or "suggested-prompts" to chat message components in array map. sent-prompt applied to sent messages, suggested-prompts applied to received messages
+  // TODO page scrolls down when new message is sent. Not when message is received
   render() {
     return html`
       <div class="chat-interface-wrapper">
         <div class="chat-wrapper">
           ${ChatAgentModalStore.developerModeEnabled ? html`
-            <div class="developer-panel-wrapper">
-              <chat-developer-panel></chat-developer-panel>
-            </div>
+            <chat-developer-panel></chat-developer-panel>
           ` : ''}
           <div class="main-wrapper">
             <chat-control-bar></chat-control-bar>
diff --git a/elements/chat-agent/lib/chat-message.js b/elements/chat-agent/lib/chat-message.js
index 6fc4f5fd0d..14b9fd1359 100644
--- a/elements/chat-agent/lib/chat-message.js
+++ b/elements/chat-agent/lib/chat-message.js
@@ -21,7 +21,7 @@ class ChatMessage extends DDD {
     this.isSentPrompt = false;
     this.message = "";
     this.messageWasSuggestedPrompt = false; 
-    this.suggestedPrompts = ["this is a suggestion", "this is a second suggestion", "this is proof the array map works (plz work I need this)"];
+    this.suggestedPrompts = ["Who are you?", "What can you do?", "this is proof the array map works (plz work I need this)"];
     this.suggestionsDisabled = false;
   }
 
diff --git a/elements/chat-agent/lib/chat-suggestion.js b/elements/chat-agent/lib/chat-suggestion.js
index 6f74c4e8f1..c374c946da 100644
--- a/elements/chat-agent/lib/chat-suggestion.js
+++ b/elements/chat-agent/lib/chat-suggestion.js
@@ -103,14 +103,13 @@ class ChatSuggestion extends DDD {
       ChatAgentModalStore.userIndex++;
   
       let date = new Date();
-      let dateString = date.toString().replace(/\s/g, '-');
       
       const chatLogObject = {
         messageID: ChatAgentModalStore.messageIndex,
         author: ChatAgentModalStore.userName,
         message: this.suggestion,
         authorMessageIndex: ChatAgentModalStore.userIndex,
-        timestamp: dateString,
+        timestamp: date.toString().replace(/\s/g, '-'),
       }
   
       ChatAgentModalStore.chatLog.push(chatLogObject);
diff --git a/elements/chat-agent/src/chat-agent.js b/elements/chat-agent/src/chat-agent.js
index 2883268a1a..f134c4485b 100644
--- a/elements/chat-agent/src/chat-agent.js
+++ b/elements/chat-agent/src/chat-agent.js
@@ -39,13 +39,14 @@ class ChatAgent extends DDD {
     this.chatLog = [];
     this.engine = "alfred";
     this.isAILoaded = false;
-    this.userName = "guest"; // TODO needs to grab username somehow or default to "guest", saw example in haxcms-site-editor-ui.js
+    this.userName = "guest";
+    this.userPicture = "";
 
 
     // button
     this.buttonIcon = "hax:wizard-hat";
     this.buttonLabel = "Merlin-AI";
-    this.isButtonHidden = false;
+    this.isButtonHidden = false; // TODO remove if unused
 
     // control bar
 
@@ -74,6 +75,13 @@ class ChatAgent extends DDD {
 
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+
+    // code for username and picture possibly found at => elements/haxcms-elements/lib/core/haxcms-editor-builder.js (starting around line 2639)
+    
+  }
+
   // TODO @container queries for screen size differences
   /**
    * LitElement style callback
@@ -209,7 +217,13 @@ class ChatAgent extends DDD {
 
 
     // button
-    
+    if (!this.isInterfaceHidden && this.isFullView) {
+      this.isButtonHidden = true;
+      CHAT_BUTTON.style.display = "none";
+    } else {
+      this.isButtonHidden = false;
+      CHAT_BUTTON.style.display = "block";
+    }
 
     // control bar
 
@@ -227,13 +241,11 @@ class ChatAgent extends DDD {
     }
 
     if (this.isFullView) {
-      CHAT_INTERFACE.setAttribute("full-view", "");
       SITE_BUILDER.style.width = "75%"; // TODO will be changed
       this.developerModeEnabled ? console.info("HAX-DEV-MODE: Interface loaded into full view") : null;
     } else {
       this.developerModeEnabled ? console.info("HAX-DEV-MODE: Interface loaded into standard view") : null;
       SITE_BUILDER.style.width = "100%";
-      CHAT_INTERFACE.removeAttribute("full-view");
     }
 
     // message
@@ -318,6 +330,10 @@ class ChatAgent extends DDD {
         type: String,
         attribute: "username",
       },
+      userPicture: {
+        type: String,
+        attribute: "user-picture",
+      },
 
       // button
       buttonIcon: {