Dialogue output in card format

[wjmgyn]

Self Checks

• [X] I have searched for existing issues search for existing issues, including closed ones.
• [X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
• [X] Please do not modify this template :) and fill in all the required fields.

1. Is this request related to a challenge you're experiencing? Tell me about your story.

In the dialog window, you can customize output cards, such as the binding cards in Coze, to achieve the following effects.

2. Additional context or comments

No response

3. Can you help us with this feature?

• [ ] I am interested in contributing to this feature.

[dosubot[bot]]

Hello @wjmgyn! I'm here to help you with any bugs, questions, or contributions. Let me know how I can assist you!

To customize output cards in the dialog window to achieve effects similar to the binding cards in Coze, you can use the Answer node in the chatflow process. This allows you to dynamically deliver content into the dialogue responses, including text and image content arranged together. Here are the steps you can follow:

1. Outputting Plain Text: You can define a fixed block of text or use output variables from preceding steps as the reply content.

   Example 1: Output plain text.

   

2. Outputting Image and LLM Reply: You can combine images with text generated from a Language Model (LLM) node.

   Example 2: Output image and LLM reply.

   

   

By configuring the Answer node to include both text and images, you can create customized output cards that resemble the binding cards in Coze ^[1].

To continue talking to Dosu, mention @dosu.

[wjmgyn]

This is quite different from what I need. It’s not simply about combining text and images. I need to place the output results into a custom card template.

[dosubot[bot]]

To place the output results into a custom card template in the dialog window, you can use the Jinja2 templating syntax to format the output. Here is an example template that structures the output into a custom card format:

{% raw %}
{% for item in chunks %}
<div class="card">
  <div class="card-header">
    Chunk {{ loop.index }} - Similarity: {{ item.metadata.score | default('N/A') }}
  </div>
  <div class="card-body">
    <h5 class="card-title">{{ item.title }}</h5>
    <p class="card-text">{{ item.content | replace('\n', '<br>') }}</p>
  </div>
</div>
---
{% endfor %}
{% endraw %}

This template will create a series of cards, each containing the chunk index, similarity score, title, and content, formatted with HTML for display in a dialog window ^[1].

To continue talking to Dosu, mention @dosu.

[wjmgyn]

Desired effect

[crazywoola]

This feature seems like a lot of work, and I'll give feedback to the team, but I don't think we have the energy to do this at the moment

[wjmgyn]

Alright, thank you! If developers can define various dialogue templates themselves, is there a way to bind the return results to their designed templates, and finally display them in the dialogue box? I believe that expanding this type of interaction can make the dialogue form more diverse and colorful.

[crazywoola]

If we could allow render HTML tag in the conversation, that could achieve what you wanna do. We are evaluating the risks of render raw HTML.

[wjmgyn]

Thank you! Looking forward to your evaluation results.

[KS-OTO]

At present, we are also considering how to implement the custom card function for dialogue return based on dify. If the official can support it, that would be great.

Ps. The returned effect object of the card we refer to is also the AI agent of Alipay.

[KS-OTO]

[Suggested reference] Coze's message card configuration document ： https://www.coze.cn/docs/guides/message_card

@crazywoola

[wjmgyn]

I hope the official can include it in the plan

[crazywoola]

@KS-OTO @wjmgyn