docs(pins): add user docs for Pins

devuser_guide/README.md

@@ -1,4 +1,6 @@
 ```bash
 npm install
-hugo server
-```
+npx hugo server
+```
+
+Navigate to http://localhost:1313

devuser_guide/content/docs/chat/pinned_messages.md

@@ -0,0 +1,60 @@
+---
+title : "Pinned messages"
+description: ""
+lead: ""
+date: 2021-05-17T08:48:23+00:00
+lastmod: 2021-05-17T08:48:23+00:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "chat"
+toc: true
+---
+
+### Channel support
+
+The pinned messages are supported in these types of channels:
+- One on one chats
+- Group chats
+- Community chats
+
+
+### Adding a pin
+
+Anyone in a channel can add pins.
+
+To add a pin, you have two options:
+- Click on the three dots (`...`) on the right of message and then click "Pin" (shown in the image below)
+- Right click the message and click "Pin"
+
+![pin](/images/chat/pin.png)
+
+
+### Removing a pin
+
+Anyone in a channel can remove a pin, even if you didn't add the original pin.
+
+To remove a pin, you have two options:
+- Click on the three dots (`...`) on the right of message and then click "Unpin" (shown in the image below)
+- Right click the message and click "Unpin"
+
+![unpin](/images/chat/unpin.png)
+
+### Seeing pins
+
+Pinned messages are shown with a yellow/orange background in the message list. You can also see all the pinned messages in the popup available by clicking the pin icon under the channel name in teh top bar.
+
+The number next to the icon shows the number of pinned messages. If there are no pinned messages, the icon is not shown.
+
+![pinIcon](/images/chat/pinIcon.png)
+
+The Pinned messages in the popup can be interacted with and unpinned.
+
+![pinPopup](/images/chat/pinPopup.png)
+
+### Behaviours
+
+When someone other than you pins or unpins a message, the message will become change in your app in real time if it is opened.
+
+If your app is closed, the message state (pinned or unpinned) will update when fetching the history.