${item.text}`;
case "pre":
return `${item.text}`;
case "link":
return `${item.text}`;
case "mention":
return `${item.text}`;
case "hashtag":
return `${item.text}`;
default:
return item.text;
}
})
.join("");
}
```
## How it works[](#how-it-works "Direct link to How it works")
### 1. JSON parsing[](#1-json-parsing "Direct link to 1. JSON parsing")
The `getChatHtml()` function:
* parses the raw JSON from `entity.c_json_data`
* iterates through all messages
* builds HTML for each message
* returns the complete formatted HTML string
### 2. Reply threading[](#2-reply-threading "Direct link to 2. Reply threading")
For messages with `reply_to_message_id`:
* finds the referenced message by ID
* extracts the first 80 characters as a preview
* displays it in a styled reply indicator above the message
### 3. Text entity processing[](#3-text-entity-processing "Direct link to 3. Text entity processing")
The `processTextEntities()` function handles two formats:
* **Simple string**: returns as-is
* **Array format**: processes each element and applies formatting
Supported entity types:
* `bold` → `` tags
* `italic` → `` tags
* `underline` → `` tags
* `strikethrough` → `` tags
* `pre` → code block `` tags
* `link` → clickable `` tags
* `mention` → styled spans for @mentions
* `hashtag` → styled spans for #hashtags
### 4. Timestamp formatting[](#4-timestamp-formatting "Direct link to 4. Timestamp formatting")
Uses the `moment` library to format ISO dates into human-readable format:
```
moment(message.date).format("MMMM Do YYYY, h:mm a");
// Output: "October 8th 2024, 2:23 pm"
```
### 5. HTML rendering[](#5-html-rendering "Direct link to 5. HTML rendering")
The custom layout uses Angular's `ngBindHtml` directive with `safeHtml` filter:
```
```
This safely renders the generated HTML with proper sanitization.
## Customization options[](#customization-options "Direct link to Customization options")
### Changing timestamp format[](#changing-timestamp-format "Direct link to Changing timestamp format")
Modify the moment format string:
```
// 24-hour format
moment(message.date).format("DD/MM/YYYY HH:mm");
// Output: "08/10/2024 14:23"
// Relative time
moment(message.date).fromNow();
// Output: "2 hours ago"
// Short format
moment(message.date).format("MMM D, h:mm A");
// Output: "Oct 8, 2:23 PM"
```
### Supporting different sender styles[](#supporting-different-sender-styles "Direct link to Supporting different sender styles")
Style messages differently based on sender:
```
function getChatHtml() {
const jsonData = JSON.parse(entity.c_json_data || "{}");
let html = "";
for (const message of jsonData.messages) {
const isAgent = message.from.includes("Support Agent");
const messageClass = isAgent ? "message-agent" : "message-customer";
html += `
`;
}
return html;
}
```
Then add corresponding CSS:
```
.thread-frame .message-agent .message-content {
background-color: #e3f2fd;
margin-left: auto;
}
.thread-frame .message-customer .message-content {
background-color: #f1f3f4;
margin-right: auto;
}
```
### Adding chat header with metadata[](#adding-chat-header-with-metadata "Direct link to Adding chat header with metadata")
Display chat information at the top:
```
function getChatHtml() {
const jsonData = JSON.parse(entity.c_json_data || "{}");
let html = `
${jsonData.name || "Conversation"}
${jsonData.type || "Chat"} • ${
jsonData.messages?.length || 0
} messages
`;
return html;
}
```
## Error handling[](#error-handling "Direct link to Error handling")
Add error handling for malformed JSON:
```
function getChatHtml() {
try {
const jsonData = JSON.parse(entity.c_json_data || "{}");
if (!jsonData.messages || !Array.isArray(jsonData.messages)) {
return 'Invalid chat data: messages array not found';
}
// ... rest of processing
} catch (error) {
return `Error parsing chat data: ${error.message}`;
}
}
```
## Use cases[](#use-cases "Direct link to Use cases")
This approach is particularly useful for:
* **Customer support**: displaying imported support conversations in your CRM
* **Chat archives**: creating searchable archives of Telegram conversations
* **Compliance**: maintaining formatted records of business communications
* **Data migration**: transferring chat history from Telegram to your system
* **Analysis**: reviewing conversation flows and support quality
* **Documentation**: preserving important discussions with proper formatting
## Related[](#related "Direct link to Related")
* [View logic](/developer-guide/building-blocks/view-logic.md) - `onReady` and other lifecycle hooks used to set `ComindView.ui` properties
* [Form layouts](/developer-guide/building-blocks/form-layouts.md) - custom layouts, `