See Original and Translated Message

[ikaru19]

What are you trying to achieve?

I want to make chat messaging app that can translate the message. Currently I success to add custom view to show to see original and see translated message. But the problem is the translation is wont update the cell. I need to update the cell to calculate the height. Do you have any idea what can i do to achieve what i want? and sorry for my bad english.

If possible, how can you achieve this currently?

Currently I'm listening to ASMessageListVC: EventsControllerDelegate . But there is a problem whenever i try to reload a table it messed up my cell. i need to reload it because i want to recaculate the height of the cell since there is some language that have different length.

What would be the better way?

Maybe there is API to activate see original and see translated message to user selected language

GetStream Environment

**GetStream Chat version:4.47.0
GetStream Chat frameworks: StreamChatUI
**iOS version:17.2
**Swift version:5.9.2
**Xcode version:15.2
**Device:Simulator Iphone 15

Additional context

[ikaru19]

And sometimes the translated message wont load until i pressed back and then reopen the channel. Is it known bug or already solved? Thanks

[nuno-vieira]

Hi @ikaru19,

Can you please provide your customization code? Otherwise I can't pinpoint if there is any issue.

Best,
Nuno

[ikaru19]

here is the code when i listen to the new message update when there is new translated or updated message

func eventsController(_ controller: EventsController, didReceiveEvent event: Event) {
    // Handle any event received
    switch event {
    case let data as MessageUpdatedEvent:
        let message: ChatMessage = data.message
        if let messageIndexPath = super.getIndexPath(forMessageId: message.id),
           let cid = message.cid {
            ChatClient.shared.messageController(cid: cid, messageId: message.id).synchronize(){[weak self] _ in
                self?.updateMessage(at: messageIndexPath, with: message)
                var cell  = self?.listView.cellForRow(at: messageIndexPath) as! ChatMessageCell
                cell.messageContentView?.content = message
                cell.messageContentView?.updateContent()
                cell.updateDataCell(data: message)
            }
            
            let changes: [ListChange<ChatMessage>] = [
                .update(message, index: messageIndexPath)
            ]
            super.updateMessages(with: changes)
            listView.reloadData()
        }
        break
    case let data as MessageDeletedEvent:
        let message: ChatMessage = data.message
        
        if let messageIndexPath = super.getIndexPath(forMessageId: message.id),
           let cid = message.cid {
            ChatClient.shared.messageController(cid: cid, messageId: message.id).synchronize(){[weak self] _ in
                self?.deleteMessage(at: messageIndexPath)
            }
        }
        break
    default:
        break
    }
} 

// Here is how handle on the ChatMessageContentView
func updateContent(with message: ChatMessage) {
    if let languageCode = getUserLanguageCodeFromCache(),
       let languageName = getUserLanguageNameFromCache(),
       let translations = message.translations,
       let resultTranslation = translations[languageCode]
    {
        textView?.text = resultTranslation
        let translationSuffix = " - Translated to \(languageName)"
        if let timestampLabelText = timestampLabel?.text,
           !timestampLabelText.contains("- Translated to") {
            timestampLabel?.text?.append(translationSuffix)
            translationLabel?.removeFromSuperview()
        }
        self.footnoteContainer?.isHidden = false
        seeOriginalLabel?.isHidden = false
        isOriginalMessage = false
    }
    
    updateSeeOriginalLabel()
}

func updateSeeOriginalLabel() {
        seeOriginalLabel?.text = isOriginalMessage ? "See Translated" : "See Original"
    }

[nuno-vieira]

Hi @ikaru19,

You don't need to do the didReceiveEvent changes. Whenever the message is updated, the cell will be automatically updated. You should not be doing this manually yourself. I can see that in fact, we have an issue that the cell might not update when new translations are inserted, so we need to fix this on our side.

Besides this, the way you determine how to show the original or the translated message is not correct. Creating a property in the cell like you are doing isOriginalMessage won't work because if the cell is reloaded, you lose the state. So you will need to create a property in extraData like shouldShowOriginalMessage: Bool to control this. Whenever the user selects "showOriginal" or "showTranslated" you need to change to update this extra data property.

We will make sure we fix the issue of new translations not updating the cell, but you also need to update your implemention of showing the original message.

Best,
Nuno

[nuno-vieira]

Hi @ikaru19,

The fix I mentioned above will be available on the 4.51.0 Release. Please, keep an eye on the new releases.

Thank you for the report!

Best,
Nuno

[laevandus]

Hello @ikaru19, we have released a new iOS SDK version 4.51.0 which addresses this issue. Thank you for reporting it.