docs(ChatPane): Add attachments and link to chat pane messages in prototype

docs/src/prototypes/chatPane/services/messageFactoryMock.ts → docs/src/prototypes/chatPane/services/messageFactoryMock.tsx

@@ -1,3 +1,5 @@
+import { Attachment, Popup, Button, Menu, popupFocusTrapBehavior } from '@stardust-ui/react'
+import * as React from 'react'
 import * as _ from 'lodash'
 import { ChatMessageProps } from 'src/components/Chat/ChatMessage'
 import { DividerProps } from 'src/components/Divider/Divider'
@@ -32,7 +34,7 @@ const statusMap: Map<UserStatus, StatusPropsExtendable> = new Map([
 function generateChatMsgProps(msg: MessageData, fromUser: UserData): ChatMessage {
   const { content, mine } = msg
   const msgProps: ChatMessage = {
-    content,
+    content: getMessageContent(content),
     mine,
     tabIndex: 0,
     timestamp: { content: msg.timestamp, title: msg.timestampLong },
@@ -44,6 +46,53 @@ function generateChatMsgProps(msg: MessageData, fromUser: UserData): ChatMessage
   return msgProps
 }
 
+function getMessageContent(content: string) {
+  const contextMenu = (
+    <Menu
+      items={[
+        { key: 'download', content: 'Download', icon: 'download' },
+        { key: 'linkify', content: 'Get link', icon: 'linkify' },
+        { key: 'tab', content: 'Make this a tab', icon: 'folder open' },
+      ]}
+      vertical
+      pills
+    />
+  )
+
+  const actionPopup = (
+    <Popup
+      accessibility={popupFocusTrapBehavior}
+      trigger={
+        <Button aria-label="More attachment options" iconOnly circular icon="ellipsis horizontal" />
+      }
+      content={{ content: contextMenu }}
+    />
+  )
+
+  return (
+    <>
+      <span>
+        {content} <a href="/"> Some link </a>
+      </span>
+      <div style={{ marginTop: '20px' }}>
+        {_.map(['MeetingNotes.pptx', 'Document.docx'], (fileName, index) => {
+          return (
+            <Attachment
+              icon="file word outline"
+              aria-label={`File attachment ${fileName}. Press tab for more options Press Enter to open the file`}
+              header={fileName}
+              action={{ icon: 'ellipsis horizontal' }}
+              renderAction={() => actionPopup}
+              data-is-focusable={true}
+              style={index === 1 ? { marginLeft: '15px' } : {}}
+            />
+          )
+        })}
+      </div>
+    </>
+  )
+}
+
 function generateDividerProps(props: DividerProps): Divider {
   const { content, important, type = 'secondary' } = props
   const dividerProps: Divider = { itemType: ChatItemTypes.divider, content, important, type }