Add Milestone 1 and 2#1
Conversation
- Current progress for Milestones 1 and 2
- Basic Chat Shell
- Content Parsing
- Registry Microservice
- Activity Discovery
- Shadow DOM Rendering (WIP)
- CSS Portability (WIP)
- Unfortunatley, I didn't fork the original repo and all commit and contribution history is stuck on dev branch
This code represents an alternative version of the initial code parsing logic, which utilizes a tree structure for parsing chat messages. The commented-out code provides a detailed implementation of the parsing process, including handling tags and regular text.
joshua-zingale
left a comment
joshua-zingale
left a comment
There was a problem hiding this comment.
I have added comments where I saw issues/areas for improvement. Let me know if you have any questions. Leave comments here.
| height: 90vh; | ||
| width: 55vw; |
There was a problem hiding this comment.
Manually setting the height and width here is not portable. Instead, the chat bot should have height and width of 100%, leaving the precise sizing to the element that contains chat-box. This allows the code using this element to select the height and width.
| const editable = this.getAttribute('contenteditable') !== 'false'; | ||
| textBar.setAttribute('contenteditable', editable); |
There was a problem hiding this comment.
This attribute is not reactive. To wit, if client code updates the attribute on active-chat later, the attribute on textBar will not be updated. Instead of setting this in the constructor, use observedAttributes along with a callback by adding methods like the following to ActiveChat:
static get observedAttributes() {
return ['contenteditable'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'contenteditable') {
this.textBar.contentEditable = (newValue !== 'false');
}
}| console.warn("addMessage requires \`is-user\` and \`sender\` attributes"); | ||
| } | ||
|
|
||
| this.chat.appendChild(message); |
There was a problem hiding this comment.
Here, chat messages are appended to an element in the shadow DOM, but in the constructor you also define slots with
const slot = document.createElement('slot');
chat.appendChild(slot);which should be where messages are stored. As written, some messages may end up in the shadow DOM (those added by .addMessage) and some may end up in slots (those added by placing sub elements inside the ).
Instead, messages should only be appended to the slots defined in the constructor to provide a single source of truth for messages.
|
|
||
| // Forward contenteditable from host → internal div | ||
| const editable = this.getAttribute('contenteditable') !== 'false'; | ||
| textBar.setAttribute('contenteditable', editable); |
There was a problem hiding this comment.
What does contenteditable mean? What is textBar?
| } | ||
|
|
||
| async addActivity(tagName) { // do we need pass attributes too? (like id="4", other data, etc) | ||
| const container = this.shadowRoot.querySelector('#activity-slot'); |
| @@ -0,0 +1 @@ | |||
| testfrq No newline at end of file | |||
There was a problem hiding this comment.
I do not know what this is for. Was this committed on accident?
There was a problem hiding this comment.
Why is this file added to this pull request? The development plan is already in the repository.
| } | ||
|
|
||
| // Public method to add a message element | ||
| addMessage(message) { |
There was a problem hiding this comment.
I commented about this later, but I will again here: Although I initially instructed you to have an addMessage method, this is actually unnecessary. Messages should be added by using appendChild on an active-chat tag.
If appendChild is used directly on ActiveChat, then the browser-native slotchange event can be used.
There was a problem hiding this comment.
To confirm my understanding, we don't need an addMessage() method at all. We will utilize the built-in appendChild() because that will automatically add chat-message components to the Shadow DOM slot component I defined in the constructor. It would look something like:
// Message creation
const msg = document.createElement("chat-message");
msg.innerText = "What is 4 + 4?";
msg.setAttribute("sender", "AI Tutor");
msg.setAttribute("is-user", "false");
// Add message to chat
const activeChatElement = document.querySelector("active-chat");
activeChatElement.appendChild(msg);I do have some additional questions:
- Do we have to implement safeguards to ensure that only the active-chat tag is being used when appending chat-message components?
- When it comes to message creation, should I create a more streamlined process (like a method) or is this how all chat messages will be created?
There was a problem hiding this comment.
Yes, your example is good.
-
I cannot think of any reason why we should need safeguards. If you can think of any reasons, let me know when I can evaluate further.
-
There is no need to have a dedicated method. The method would be simple enough that any user of your web components could implement it himself.
- Edit active-chat.js for feedback
- Added comments
- Fixed sizing to 100%
- Fixed textbar to properly take input
- Used 'textarea' element
- Properly adds message to the chat for users
- Edit chat-message.js for code quality
- Added comments
- Edit src/index.js for code quality
- Edit mcq/index.js, option.js, and question.js for MCQ Web component
- Question displays title and holds an answer attribute
- Options are buttons that display text and hold option-id attribute
- Edit index.html for code quality
- Removed the MCQ component because that lives in the server
- Removed frq/index.js and mcq/answer.js for code quality
- Removed DEVELOPMENT_PLAN.md for duplication
Current Progress
When all feedback changes have been made, we will do a test run of requesting the MCQ component from the back-end and displaying it on the front-end. |
Lkarm003/m1 2 feedback changes
Comment out the parse function and its implementation.
merge lumosDev into branch
Add chat-interaction and chat-activity components
…ylend/active-chat-lumos into sky/interactionSerialization
…ions displaying issue
Sky/interaction serialization
Added accept function to handle interactions in MCQ component.
…ylend/active-chat-lumos into lahari/Milestone3.1
- Removed debugging folder .vscode/
- Added node_modules/ folder for marked library
- Delete later if this does not fit within the goals of the framework
- Edit active-chat.js to add slotchange event
- When a message is appended, trigger slotchange and call parser
- Hardcoded some interactions to simulate an LLM speaking back
- Edit chat-activity.js for "virtual" accept method
- Becuase all activities need to be wrapped in a chat-activity function, we can call
accept() on the chat-activity tag itself and it will call it on it's children making it
vaguely follow the visitor pattern
- Edit chat-message.js for Shadow DOM rendering
- Simplified code to append fetched component as child
- Edit parsing_code.js to modify parser
- Note: Parser still does not support Markdown
- Parser now identifies unknown tags and calls on the appropriate function depending on encountered tag
- Edit src/index.js to remove hardcoded imports
- Declared window.CONFIG.COMPONENT_URL
- Edit registry_client.js for sending HTTP request
- Removed uncessary functions
- Fixed URL naming
- Renamed mcq/ folder in component-library
- There was an issue where we took the tag name of the HTML element and used that in the file path name.
This doesn't work because the folder is called "mcq" but the tag is "multiple-choice-question".
- Moved option.js and question.js into static/ folder of multiple-choice-question/
- This allows only index.js to be served alongside supporting files within static/
- Edit multiple-choice-question/index.js for accept() method
- The function takes an interaction element and uses the passed activity-id to visually modify an
existing activity
- Edit go.mod for file path name
- Edit component.go to correctly serve files
- Before the handler only looked at folder path without looking at a particular file, now
it accepts both folder path and specified file (multiple parts)
- Edit index.html to remove hardcoded examples
- Edit active-chat.js for a refresh listener
- Used DOMContentLoaded to identify a refresh
- Retrieve chat log and loop through messages
- Parse each message to build back the state and replay events
- Note: Has not been tested yet because we are unsure how/where to store
the chat log (method/medium?)
- Edit parsing_code.js for replay integrity notes
- The parser must correctly distinguish between user and AI input
to properly render a message
- i.e. A user cannot write XML and trigger the parser into building that
- Edit active-chat.js for code quality
- Delete hardcoded LLM response
- Parsing only happens for chat-interactions on slotChange
- Edit chat-activity.js to only loop one child for accept()
- Only one child should exist in a chat-activity so a loop isn't necessary
- Edit chat-message.js for error handling
- Now displays an error message when failing to connect to the back-end for a component
- Edit component.go for error handling
- Revised error message
Updated the parsing function to convert Markdown to HTML before parsing to DOM and serializing to XML.
…n of make api key private
Sky/gemini
- Edit active-chat.js for slotchange event
- Implement chatHistory array for LLM feedback
- Allows LLM to recount previous messages and answers to give proper feedback
- Utilize innerHTMl for parser
- Edit parsing_code.js for code quality
- Edit registry_client.js to check for invalid script tag
- Edit gemini.js for LLM responses
- Wrap all responses in a chat-message tag to be appended to framework
- Removed direct parse call
- Modified instructions to be more clear
4 participants
Current Chat Shell