See discussion here: <a class="issue-link js-issue-link" data-error-text="Failed to lo

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Links in messages should be highlighted and clickable about rasa-webchat HOT 4 CLOSED

botfront commented on June 24, 2024

Links in messages should be highlighted and clickable

from rasa-webchat.

Comments (4)

znat commented on June 24, 2024 2

@amn41 - It's done and published

from rasa-webchat.

amn41 commented on June 24, 2024

I'm happy to work on this - shall I give it a try?

from rasa-webchat.

znat commented on June 24, 2024

That would be wonderful! Le ven. 5 oct. 2018 13 h 04, Alan Nichol <[email protected]> a écrit :

…

I'm happy to work on this - shall I give it a try? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADhgKqsAP6iWXyYWw01Olm84I4Iyw9mYks5uh5EkgaJpZM4XAk2m> .

from rasa-webchat.

amn41 commented on June 24, 2024

Awesome, I'm having a bit of trouble with npm, but it should really just be this diff:

file:
/src/components/Widget/components/Conversation/components/Messages/components/Message/index.js

 import React, { PureComponent } from 'react';
 import { PROP_TYPES } from 'constants';
+import { linkify } from 'linkify';
 
 import './styles.scss';
 
 class Message extends PureComponent {
   render() {
+    const content = linkify(this.props.message.get('text'));
     return (
       <div className={this.props.message.get('sender')}>
         <div className="message-text" >
-          <p style={{ margin: '0' }}>{this.props.message.get('text')}</p>
+          <p style={{ margin: '0' }}>{content}</p>
         </div>
       </div>
     );