As position-area is not yet officially supported in firefox (its
only in nightly builds, as of now), so switching to the inset
block/inline start/end css properties.
Use position fixed followed by using position-area so that one
can use anchor passed through showPopover.
Avoid the hidePopover from mouseLeave, because as the mouse moves
over the poped up popover ui, the mouseLeave will be called on
the chat message block/container. And that would have closed the
popover and inturn mouseEnter would have got called on ChatMsg,
given now with the popover hidden, the ChatMsg block is directly
accessible. So this leads to twinkling / toggling ie continues
show/hide of the popover.
Inturn in mouseEnter itself decide when to close the previous
popover (ie if the chatmessage id is different from what it was
before).
Trap the mouseenter and mouseleave events wrt the chatmessage
block to show the chatmessage-popover ui inturn within the
corresponding chatmessage.
When ever user clicks the popover menu's delete button, the
uniqId associated with each chat message, is now used to
delete the user selected chat message.
Initial skeleton wrt clipboard copy.
Limit scroll to veritical dir and inturn show only when needed
Move the Tool Call Edit UI's HR into its div.
Add a bottom margin wrt the individual chat messages.
Add a new helper to create a file type input which includes a btn
with image. Use same wrt the user image selection button.
Update button creation helper to show innerText only if the newly
added innerHTML arg is undefined.
When ever user makes a image selection, the image will be shown
in the input-filetype-image-button. In turn when the same is
submitted to ai engine server, the image will be cleared.
Use css conditional attribute styling to change background color
of the user input textarea to match the tool role message block
color, when the user input textarea is in the TOOL.TEMP mode
With this user can know that the user input area is currently
showing and accepting tool result data for submission.
Define rules to ensure that chat message contents wrap so as to
avoid overflowing beyond the size of the screen being viewed.
The style used for chat message role to be placed with vertical
oriented text adjacent to the actual message content on the side
seems to be creating issue with blank pages in some browsers,
so avoid that styling when one is printing.
Seperate out the message ui block into a container containing
a role block and contents container block.
This will allow themeing of these seperately, if required.
As part of same, currently the role has been put to the side
of the message with vertical text flow.
Use HTMLElement's dataset to maintain tool call id along with
the element which maintains the toolname.
Pass it along to the tools manager and inturn the actual tool
calls and through them to the web worker handling the tool call
related code and inturn returning it back as part of the obj
which is used to return the tool call result.
Embed the tool call id, function name and function result into
the content field of chat message in terms of a xml structure
Also make use of tool role to send back the tool call result.
Do note that currently the id, name and content are all embedded
into the content field of the tool role message sent to the
ai engine on the server.
NOTE: Use the user query entry area for showing tool call result
in the above mentioned xml form, as well as for user to enter
their own queries. Based on presence of the xml format data at
beginning the logic will treat it has a tool result and if not
then as a normal user query.
The css has been updated to help show tool results/msgs in a
lightyellow background
hanishkvc
Diego Devesa