Bug: Unable to mention users when mentioning in the file description

[devanshkansagra]

Description:

If you try to mention users in the file description, the user does not get mentioned instead it gets in the normal text form

Steps to reproduce:

1. Click on upload file button and mention a user with @ in the file description

Expected behavior:

User should get mentioned in the file description

Actual behavior:

Screencast.from.15-09-24.10.24.39.PM.IST.webm

This is a similar issue I found on Rocket chat main repo as well, check out here: #32151

Any help from other contributors would be really helpful.

[HumaimaRiaz47]

I want to work on this issue please assign me this issue.

[devanshkansagra]

Hey @HumaimaRiaz47, it's good to hear that you want to solve this issue. I am not the maintainer of this project so I cannot assign it to you, but still you can try to solve this issue. All the best !

[Sahil-Gupta584]

Hey @HumaimaRiaz47 I am trying to solve this issue but because of first time i am not able to setup development server. issue arising when i am trying to login but if failed . It maybe because of using wrong credentials? please guide me .
Here is the video for issue i faced

EmbeddedChat._.Simple.-.Simple.Storybook.and.7.more.pages.-.Personal.-.Microsoft_.Edge.2024-09-28.16-09-09.mp4

also @devanshkansagra if you can help me.

[devanshkansagra]

Hey @Sahil-Gupta584, these credentials are for other rocketchat server i.e. demo.qa.rocket.chat. so this credentials won't work locally. To setup locally, install rocketchat server first. then after installation it will run on localhost:3000 by default. When you open rocketchat server on localhost:3000 you will have to register yourself to rocketchat, after registeration you will have your own local environment. Now as per README.md file you enable cors in your local environment and try again with the credentials which you registered on your local environment. then it will work.

[Sahil-Gupta584]

@devanshkansagra thank you for quick response as you said to setup rocketchat server i got this page from redme.md https://developer.rocket.chat/v1/docs/windows-10 on this page in the section 'machine requirement' they have mentioned for 8GM RAM+ but I have 4GB RAM can i still try to install server or it will be waste?

[devanshkansagra]

Hey @Sahil-Gupta584 try it, if it works coz I don't have idea about working in 4GB ram coz I have 8GB and I am using Ubuntu so there is very less ram usage. But don't worry try it once, if it won't work then setup Rocket chat on GitPod, there will be instructions on Rocketchat Github repo to set it up on GitPod.

[devanshkansagra]

And after setting up to gitpod you will get a public url of rocketchat server, create a .env file on packages/react directory in Embedded chat and add this environment variable

STORYBOOK_RC_HOST=<gitpod_rocketchat_url>

[Sahil-Gupta584]

@devanshkansagra as you suggested i setup gitpod and did build,dev>

gitpod /workspace/EmbeddedChat (develop) $ yarn build
lerna notice cli v6.6.2

    ✔  @embeddedchat/auth:build (12s)
    ✔  @embeddedchat/api:build (23s)
    ✔  @embeddedchat/ui-elements:build (41s)
    ✔  @embeddedchat/ui-kit:build (42s)
    ✔  @embeddedchat/markups:build (17s)
    ✔  layout_editor:build (12s)
    ✔  @embeddedchat/react:build (37s)
    ✔  @embeddedchat/htmlembed:build (9s)
    ✔  e2e-react:build (9s)

 —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  Lerna (powered by Nx)   Successfully ran target build for 9 projects (1m)
 
gitpod /workspace/EmbeddedChat (develop) $ yars dev
bash: yars: command not found
gitpod /workspace/EmbeddedChat (develop) $ yarn dev
lerna notice cli v6.6.2

 >  Lerna (powered by Nx)   Running target dev for 4 projects:

    - @embeddedchat/api
    - @embeddedchat/auth
    - e2e-react
    - layout_editor

 —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

> @embeddedchat/auth:dev


> layout_editor:dev

  VITE v5.1.3  ready in 180 ms
  ➜  Local:   http://localhost:5173/EmbeddedChat/layout_editor
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
Server running at http://localhost:1234
✨ Built in 5ms

but port 3000 isnt started, also there was no dev command in package.json so I manually added "dev": "lerna run dev" similar to build,lint.

please let me now what i am missing to start server.

[devanshkansagra]

Noo @Sahil-Gupta584, you don't have to setup Embedded chat on Gitpod, I said you to setup Rocketchat on Gitpod. Now follow this instructions carefully

1. Open: https://github.com/RocketChat/Rocket.Chat/
2. You will see in README file an in that you will see Open in Gitpod, click on that.
3. Once you opened it you will have to login / authorize GitPod with GitHub, which might have you done already
4. After login / authorization you will see some dropdowns like this
   
   (You can adjust the cores) but 4 cores 8gb ram will be fine enough
5. Click on continue to create a new workspace.
6. After sometime you will see vscode like in a browser and it will automatically install dependencies. but if it fails then check the node version first using node -v (make sure it is 14.21.3) and meteor version (make sure 2,16) if the meteor version is 3.0.3 like something the run this script curl https://install.meteor.com/\?release\=2.8 | sh.
7. After installing meteor, install deno: curl -fsSL https://deno.land/install.sh | sh
8. after running scripts install dependencies again with yarn install. Now this time will be installed successfully
9. After installation run yarn dsv to initialize the rocketchat instance
10. wait for sometime to start
11. Later on you will see a pop up message like this and you will see a window like this
    
12. You can click on make it public and then copy the url seen in simple browser and paste it in your browser url and wait for sometime to see rocketchat registeration window. register it after that you will see your own instance with general channel

Now open EmbeddedChat in your local(not gitpod one) go to packages/react and create a file .env and add environment variable STORYBOOK_RC_HOST=<paste that copied url from gitpod>

then use node version 16.19.0 in your local Embedded chat repo (not gitpod one) and go to packages/react dir and run yarn install and after yarn storybook. to run

I hope now you will understood this

[Sahil-Gupta584]

@devanshkansagra I followed your steps and now able to setup roucketchat server but still encountering same error after clicking on login

server>

client storybook>

EmbeddedChat._.Simple.-.Simple.Storybook.and.6.more.pages.-.Personal.-.Microsoft_.Edge.2024-09-30.15-20-38.1.mp4

[devanshkansagra]

you have to enable cors in the settings

[devanshkansagra]

You can find it under Administration > Settings > General > REST API > Enable CORS. This setting must be enabled to access the app's functionality.

[devanshkansagra]

Hey @Sahil-Gupta584 I have said you to set it up on GitPod, the Rocket chat is so huge for development, even in my case if I run locally the(Development build) it consumes 6.5GB out of 8gb ram and + EmbeddedChat's. to reduce ram usage I suggested you to run it on gitpod

[Sahil-Gupta584]

@devanshkansagra I have fixed issue upto certain extend users can mention not in file description but like normal message the background of mentioned texts changes but it doesnt happen for file description >

EmbeddedChat._.Simple.-.Simple.Storybook.and.3.more.pages.-.Personal.-.Microsoft_.Edge.2024-10-01.02-27-45.mp4

There are separate functions for sending message and sending attachement>

and in both calback functions endpoints are different issues is that request is going to croketChat server and therefor i am unable debug more .If I get to know how new message are added to chat body then I may fix the issue but I am unable to find code from where new messages are added to chat body

[SinghaAnirban005]

Hey @devanshkansagra could you review my PR and let me know of any changes required