Unique AI Documentation

Rendering Images in Chat Messages

2 min read

Overview

The Unique chat applications takes communication to the next level by allowing users to render images directly within chat messages using Markdown syntax. This feature is designed to make sharing visual content seamless and efficient, enhancing collaboration and understanding in real-time.

Whether you're sharing a screenshot for troubleshooting, a design draft for feedback, or a chart for a project update, embedding images directly in your messages ensures that your visuals are always in context. This guide will walk you through the process, highlight the benefits, and provide tips to make the most of this feature.

Who is this for?

This feature is designed for:

  • Pro users who want more rendering capabilities

  • Team members who need to share visual content during discussions.

  • Project managers who want to include visual aids in their updates

Benefits

  • Enhanced Communication: Share visual content directly in chat for better understanding.

  • Time-Saving: No need to switch between applications to view images.

  • Professional Presentation: Inline images make messages more engaging and clear.

Use Cases

  • Sharing Screenshots: Quickly share screenshots for troubleshooting or feedback.

  • Visual Updates: Include charts, graphs, or images in project updates.

  • Collaborative Design: Share design drafts or mockups for real-time feedback.

Step-by-Step Guide

To render an image in a chat message, use the following Markdown format:

![image](unique://content/cont_1234)

Steps to Embed an Image

  1. Upload the Image: First, upload the image to the chat. This can typically be done by dragging and dropping the image file into the chat window or using the upload button provided in the chat interface.

  2. Copy the Image URL: Once the image is uploaded, it will be assigned a unique URL in the format unique://content/content_id. Copy this URL.

  3. Insert the Markdown: In your chat message, use the Markdown syntax to embed the image. Replace unique://content/cont_1234 with the actual URL of your uploaded image.

    Example:

    ![image](unique://content/cont_1234567890abcdef)

  4. Send the Message: After inserting the Markdown, send your chat message. The image will be rendered inline within the chat.

Example

Sending this prompt:

This is an image that i took from a note:\n![image](unique://content/cont_nwnfwd7kq5czq04begyb6ub8)

Generates the following output:

Screenshot 2024-11-18 at 13.54.44.png

Tips & Tricks

  • Image Source: Only images that have been uploaded into the chat can be displayed. The image URL must follow the format unique://content/content_id.

  • Security Considerations: For security reasons, our chat application does not render images that:

    • Do not follow the unique://content/content_id format.

    • Are not part of the chat the user is currently in.

  • Content ID: The content_id is a unique identifier assigned to each uploaded image. Ensure you use the correct content_id associated with the image you want to display.

  • Preview Before Sending: Double-check the Markdown syntax to ensure the image renders correctly.

  • Organize Content IDs: Keep track of your uploaded image IDs for easy reuse.

  • Combine with Text: Add context to your images by including descriptive text in your message.

Limitations

  • Image Source: Only images uploaded into the chat can be displayed. External URLs are not supported.

  • Security Restrictions:

    • Images must follow the unique://content/content_id format.

    • Images not part of the current chat cannot be rendered.

  • Content ID: Ensure you use the correct content_id associated with the image you want to display.

Last updated