minor changes, button hides correctly

haxtheweb · Jun 20, 2024 · 5661cd9 · 5661cd9
1 parent 6e591bf
commit 5661cd9
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: {