ADE - Chat response formatting

[raolak]

Chat messages with code and md formats are not that well handles. For quick fix we can use React MArkdown component...I did quick poc, this is how it looks. This will improve the user experience.

npm install react-markdown remark-gfm

tailwind css config
add require('@tailwindcss/typography')]
plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],

globals.css (whatver css you are using) add prose

Example

  .prose {
    @apply max-w-none; /* Prevent Markdown from restricting width */
  }
  
  pre, code {
    @apply font-sans text-sm;
  }

code example

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
  <ReactMarkdown remarkPlugins={[remarkGfm]} className="prose text-sm">
            {message.content}
   </ReactMarkdown>

This should be quick one for now.

[raolak]

I see still formatting is not that clean .. we need to have better representation of formatting for various output types... generic and user defined outputs.

[cpacker]

@raolak what do you mean by better representation of formatting for various output types... generic and user defined outputs, do you mean like markdown vs python code snippets vs ...? Why couldn't it all be just markdown?

Or do you mean creating other functions like send_message_markdown instead of relying on the LLM to put markdown inside the function call arg interleaved with text?

[raolak]

Hi @cpacker, apologies for the delayed response, I was tied up with some tasks. Here’s my perspective—please feel free to share your thoughts or correct me if needed.

The output from chat responses is not necessarily limited to text or markdown; it can vary significantly based on domain-specific use cases. For instance, users might expect specific types of formatted responses, such as tables, graphs, or interactive widgets, which would require different rendering approaches.

Few example formats

Format Type	Use Case	Example
Tabular Data	Data reporting, dashboards	`
JSON/Code Snippets	API responses, configurations	{ "status": "SUCCESS", "errors": 0 }
Graphical Visualizations	Analytics, monitoring metrics	Pie Chart: 🟢 Success: 80% 🔴 Failure: 20%
Interactive Widgets	Approvals, configurations	[✔ Approve] [✖ Reject] [📄 View Logs]
Storytelling Text	Incident summaries, alerts	🚨 Incident Alert: 502 Bad Gateway at 14:30 UTC
Kanban Board	Task management, workflows	To Do: Incident #123 → In Progress: Incident #124 → Done
Tree/Graph Structures	Dependencies, hierarchies	Service: Payment API → Database: Healthy → Auth: Down
React Component	generic use case with well defined input schema which can be lined with UI code	Example Visualisation, Table/List (Top customers , ranking etc), Map (activi sessions), heat map etc

There can also be highly custom response types requiring unique formats. Users should be able to define their own custom renderers or formatters for specific needs, such as React components built with a schema-driven approach.

---

Considerations

1. Default & User-Defined Formats

   • By default, the platform (e.g., Lepta) should provide baseline formatting support for common use cases.
   • Users should also be able to define custom renderers (e.g., React components) to handle specialized formats.

2. Interoperability of Renderers

   • These rendering components should function seamlessly across contexts, whether in chat responses or integrated apps.
   • For instance, a task management app summarizing task progress should render the same response format correctly.

3. Parsing Issues in Chat Stream Responses

   • Currently, chat responses can sometimes have parsing issues, especially when handling JSON data interleaved with text. This requires normalization of data on the client side, which adds unnecessary complexity.
   • Ideally, the server should ensure responses are well-structured and parsable by default.

---

Example of Current Parsing Challenges

Here’s an example of problematic chat responses:

data: {"id":"message-1", "message_type":"function_call", "function_call":{"arguments":" and"}}
data: {"id":"message-2", "message_type":"function_call", "function_call":{"arguments":" maintenance"}}
data: {"id":"message-3", "message_type":"function_call", "function_call":{"arguments":"."}}

To handle this, the client currently needs to normalize the fragments into cohesive responses, which complicates custom formatting. A well-defined structure would eliminate this need.

---

Suggestions

• Schema-Driven Formatting: Introduce a schema for chat response types, ensuring they are easily parsable and compatible with both default and custom renderers.
• Markdown Quick Fix: While a robust solution is being implemented, a quick improvement can involve using React Markdown with Tailwind CSS for better rendering of markdown content. Example implementation:

  import ReactMarkdown from 'react-markdown';
  import remarkGfm from 'remark-gfm';
  <ReactMarkdown remarkPlugins={[remarkGfm]} className="prose text-sm">
  
  {message.content}
  
  </ReactMarkdown>;
  
  

is it possible to replace the code aspects of apps using AI? example all the metrics , progress stats? Example from below screen shot which part of the feature can be replced with AI without developer adding code assuming letta has data in memory or its been fed as part of meesage

[raolak]

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[github-actions]

This issue was closed because it has been inactive for 14 days since being marked as stale.