One important feature of the JACoB chat interface is the ability for the AI to display dynamic buttons that will trigger workflows such as creating/updating a new GitHub issue. Here is the current process for how the buttons are displayed:
Create a new SpecialPhrases tag in src/types.ts
In the scenario prompt, tell the LLM to display the tag as part of the output for a given situation
In the src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatMessage.tsx component, we first remove the tag text from the message, and then render a button that calls a function (each function is passed down into this component)
As we start to add more functionality to the web portal, this approach does not scale well as we need to continually pass more and more functions into this child component, conditionally render each button, etc.. We also have issues where the LLM will output part of the instruction prompt with the tag (i.e. ===== <> =====).
There must be a better way to handle this type of situation, ideally without resorting to adding a state management library like redux to handle passing the params to the child. High level it might look something like this:
Create a Tag object with a tag, type (i.e. button, link), title, link?, and functionName?
Create constant array of usable Tags that the LLM can envoke
Write a util function that converts any tags from the chat output to the corresponding tag object (note this is a little difficult due to the stream chat functionality)
Pass the tag to the chat message component and dynamically render the button/link and add a click handler to run the function or open the link (in a new tab)
Dynamically evaluate the function at run time. This is not something I have a ton of experience with in React but it seems like it would be possible (if maybe a minor security risk), similar to (or maybe using?) dangerouslySetInnerHTML?
One important feature of the JACoB chat interface is the ability for the AI to display dynamic buttons that will trigger workflows such as creating/updating a new GitHub issue. Here is the current process for how the buttons are displayed:
SpecialPhrasestag insrc/types.tssrc/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatMessage.tsxcomponent, we first remove the tag text from the message, and then render a button that calls a function (each function is passed down into this component)As we start to add more functionality to the web portal, this approach does not scale well as we need to continually pass more and more functions into this child component, conditionally render each button, etc.. We also have issues where the LLM will output part of the instruction prompt with the tag (i.e. ===== <> =====).
There must be a better way to handle this type of situation, ideally without resorting to adding a state management library like redux to handle passing the params to the child. High level it might look something like this:
dangerouslySetInnerHTML?