User can enable or disable the simple minded bruteforce markdown
parsing from the per session settings.
Add grey shading and align text to left wrt table headings of
markdown to html converted tables.
Switch to the simpler split based flow.
Include tr wrt the table head block also.
Add a css entry to try and have header cell contents text aling
to left for now, given that there is no border or color shaded
or so distinguishing characteristics wrt the table cells for now.
Given that now currently settings relates to only those related
to the current chat session, so indicate the name/chatId of the
current chat session in the Settings heading.
* this inturn makes the id dynamic, so change the css rule wrt
settings block from using id to classname, and to help with same
also set a class name for the top level settings block.
As part of same, as well as to help and ensure sanity in general
add a helper to clean up a string to be a form usable as a chatId
Instead use the explicit positioning, which was already added to
support firefox, given that firefox still doesnt support anchor
based positioning.
Also move the popover to top of the chat message bubble/block,
instead of the bottom area. This ensures that the popover isnt
butting heads with the tool call trigger or user input blocks.
Use variables in css for colors.
Change the tool response color to be bit more soothing and kind of
syncd with the user collor. However the tool call color is left
bit odder, to ensure user sight goes there for validating and
triggering.
Also had forgotten to rename to image_urls, when switching from
single image with its corresponding field image_url to image_urls,
wrt removing the same after it has been added to the content array.
Instead of having texts submit and image, replace them with equiv
unicode icons.
Adjust the size of these buttons to be smaller, given that now they
only contain icons in them.
Switch from btn+inputfile+img to btn+inputfile wrt image loading btn
given that the image will be shown in seperate dynamically created
images in the user in div.
move sessions buttons div to heading block
and move program name to the default block added to chat div, if
there is no chat in a given chat session.
cleanup the default block helpers to follow a common pattern.
also make the chat message bubbles/blocks bit more prominently box
shadowy
Now popover menu autocloses faster, so that it doesnt distract the
user too long, if not needed.
Reasoning bubble dashed border has been made thinner, so that it
appears pleasant and not over bearing.
As firefox doesnt seem to currently support anchor based relative
positioning of the popover, so explicitly set the position of the
popover.
Also reposition the popover to be in the bottom right corner rather
than the previous top center position.
* Rather updated position-area css property ensures this automatically
wrt chrome browsers.
* while for firefox the explicit code that is added is needed.
NOTE: Had added that id, just in case firefox was goofing up bcas of
the element not having unique id or so, either way the firefox issue
is unrelated and more fundamental lack of support for now.
Add better visual cues wrt the tool call trigger block and the
user input block, and inturn remove the now unneeded horizontal
seperation line between chat messages block and the tool call
trigger block.
Bring in the user role color gradient to the full user input block
Change the TEMP roles to use -TEMP instead of .TEMP suffix, so
that role based css rules get applied without any complexity
that may inturn not get applied.
Avoid extra newlines in the err message returned by the tool call
workers. Given that now there is a proper tool call response
sent back to the ai backend/server, without using user and ai
text content block itself to maintain the tool call and its
response info (which is what this client was doing initially
and so more spacing was added to important parts to bring it
into better focus, just in case).
Now use javascript to trap the button click and inturn change css
class to hide or show the corresponding div.
This moving away from details with summary being the top level
title + buttons block, avoids the warning wrt non standard use of
details element, as well as gives a clear icon to end users wrt
toggling the sessions+systemprompt block.
Allow AutoCreated Object Properties Editing UI to be themed to an
extent by assigning a id to the top level element, which is based
on the legend specified.
Use the same to add inline padding as well as adjust border radius
wrt the elements within, for the Settings ui. And min height and
border width wrt input, select and buttons within.
Similarly for the default Usage,Restore and SettingsInfo summary
titles, avoid border-radius.
Show the string representation of the sliding window selected.
Add some padding to system prompt input.
Reduce fullbody height by a tiny bit so that everything fits within
the overall height of the screen available, without needing a dummy
no use vertical scrollbar for full body. Rather its hardcoded for
now, in a sense, need to look into all elements competing for vertical
space and see how to make this auto adapt responsively, if there is
any subtle issue beyond me going beyond 100vh.
Set scrollbar in general to thin and minimal contrast subdued look.
Change user gradiant to blue hue, also add a subtle whitish hue based
gradiant to assistant chat messages. Also make trimmed content bgnd
a gradiant.
Wrt print media target, instead of trying to change the body color
directly, use the global variable added for same, so that other elements
also adjust suitably wrt the change like gradiants merging seemlessly
into the changed overall background and so.
Allow the input textarea to grow vertically to an extent, while still
ensuring that it doesnt cross a limit which could lead to additional
full page scrollbar showing up.
Add a border-radius by default across elements. In turn add padding
wrt toolcall details block so that things dont get cutoff and appear
proper.
PopOver menu now auto closes, if user doesnt interact with it, for
a predefined timeout period.
Change the button border color, which seems to make it more pleasent
with current backgrounds at different places.
Update usage note wrt vision and click to toggle wrt title area.
Make the restore / load session block into a details based block.
Also place it into the parent div immidiately, but in hidden state.
Inturn only if a corresponding entry found in the db, create the
button for loading, as well as unhide it. This ensures that the
restore block's position|order doesnt change in the set of ui
elements wrt usage,restore,settings-info.
Move the heading, sessions list and system prompt into a details
block so that user can hide them if required.
avoid the borders around chat message blocks and the chat message
role blocks within them, instead go for a subtle box shadow.
Use gradiants wrt heading, as well as chat message role based color
codings.
Update both the normal/screen view as well as the print view wr
above.
Have a common 1vmin radius wrt buttons in general and chat messages.
While the input area and its buttons have more rounded look.
Force a minimum height wrt the buttons in general, while ensuring
that the popover menu buttons tightly fit the content/icons in them.
Use slight off white body background & make user input area whiter.
Allow button and input area to have rounded borders.
Also adjust the rounding wrt chat messages and popover menu btns.
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