feat: add support for plugins rendering DIDComm messages in Chat (#238)

* feat: add support for plugins rendering DIDComm messages in Chat

* fix: uncomment

packages/agent-explore/src/plugins/chats/ChatBubble.tsx

@@ -1,15 +1,33 @@
 import React from 'react'
 import { Row, theme } from 'antd'
 const { useToken } = theme
-import { MarkDown } from '@veramo-community/agent-explorer-plugin'
+import { usePlugins } from '@veramo-community/agent-explorer-plugin'
+import { IMessage } from '@veramo/core-types'
+import { ChatMarkdown } from './ChatMarkdown'
 
-interface ChatBubbleProps {
-  text: string
-  isSender?: boolean
+export interface ChatBubbleProps {
+  message: IMessage & { isSender: boolean }
 }
 
-const ChatBubble: React.FC<ChatBubbleProps> = ({ text, isSender }) => {
+const ChatBubble: React.FC<ChatBubbleProps> = ({ message }) => {
+  const { isSender } = message
+  const { plugins }  = usePlugins()
   const { token } = useToken()
+
+  let Component: React.FC<ChatBubbleProps> | undefined = undefined
+  plugins.forEach((plugin) => {
+    if (Component === undefined && plugin.getMessageComponent) {
+      const Obj = plugin.getMessageComponent(message)
+      if (Obj) {
+        Component = Obj
+      }
+    }
+  })
+
+  if (Component === undefined) {
+    Component = ChatMarkdown
+  }
+
   return (
     <Row
       style={{
@@ -31,7 +49,7 @@ const ChatBubble: React.FC<ChatBubbleProps> = ({ text, isSender }) => {
           color: token.colorText,
         }}
       >
-        <MarkDown content={text} />
+        <Component message={message} />
       </div>
     </Row>
   )

packages/agent-explore/src/plugins/chats/ChatMarkdown.tsx

@@ -0,0 +1,8 @@
+import { MarkDown } from "@veramo-community/agent-explorer-plugin"
+import { ChatBubbleProps } from "./ChatBubble.js"
+
+export const ChatMarkdown = ({ message }: ChatBubbleProps) => {
+    // @ts-ignore
+    const content = message && message.data && message.data.content || ''
+    return <MarkDown content={content} />
+}

packages/agent-explore/src/plugins/chats/ChatWindow.tsx

@@ -10,20 +10,21 @@ import { scrollMessages } from './scroll'
 import { useChat } from '../../context/ChatProvider'
 import { IdentifierProfile } from '@veramo-community/agent-explorer-plugin'
 import { Button, Col, Row, theme } from 'antd'
+import { IDataStoreORM } from '@veramo/core-types'
 
 const ChatWindow: React.FC = () => {
   const { threadId } = useParams<{ threadId: string }>()
   const { selectedDid, newRecipient } = useChat()
   const newThread = threadId === 'new-thread'
-  const { agent } = useVeramo()
+  const { agent } = useVeramo<IDataStoreORM>()
   const { token } = theme.useToken()
   const navigate = useNavigate()
 
   const { data: messages, refetch } = useQuery(
     ['chats', { id: agent?.context.id, threadId: threadId }],
     async () => {
       const _messages = await agent?.dataStoreORMGetMessages({
-        where: [{ column: 'threadId', value: [threadId] }],
+        where: [{ column: 'threadId', value: [threadId!] }],
         order: [{ column: 'createdAt', direction: 'ASC' }],
       })
       return _messages?.map((_msg: any) => {
@@ -104,11 +105,8 @@ const ChatWindow: React.FC = () => {
         {messages?.map((message: any) => {
           return (
             <ChatBubble
-              // @ts-ignore
-              text={message?.data?.content}
+              message={message}
               key={message.id}
-              // @ts-ignore
-              isSender={message.isSender}
             />
           )
         })}

packages/agent-explore/src/plugins/chats/Chats.tsx

@@ -9,6 +9,7 @@ import { useChat } from '../../context/ChatProvider'
 import { IDataStoreORM, IMessage } from '@veramo/core'
 import { useEffect } from 'react'
 import { Col, Row, theme } from 'antd'
+import { usePlugins } from '@veramo-community/agent-explorer-plugin'
 const { useToken } = theme
 
 const groupBy = (arr: any[], property: string) => {
@@ -25,13 +26,17 @@ interface IsSenderTaggedMessage extends IMessage {
 const ChatView = () => {
   const { token } = useToken()
   const { agent } = useVeramo<IDataStoreORM>()
+  const { plugins } = usePlugins()
+  const allChats: string[] = ['https://didcomm.org/basicmessage/2.0/message']
+  // find all supported message types in plugins
+  plugins.forEach((plugin) => plugin.supportedChatMessages && allChats.push(...(plugin.supportedChatMessages)))
   const { selectedDid } = useChat()
   const { threadId } = useParams<{ threadId: string }>()
   const { data: threads, refetch } = useQuery(
     ['threads', { id: agent?.context.id, selectedDid, threadId }],
     async () => {
       const messages = await agent?.dataStoreORMGetMessages({
-        where: [{ column: 'type', value: ['https://didcomm.org/basicmessage/2.0/message'] }],
+        where: [{ column: 'type', value: allChats }],
         order: [{ column: 'createdAt', direction: 'DESC' }],
       })
       // TODO: should be able to do this filter in the query instead of here

packages/plugin/src/types.ts

@@ -1,6 +1,6 @@
 import { MenuProps } from 'antd';
 import { MenuDataItem } from '@ant-design/pro-components';
-import { UniqueVerifiableCredential } from '@veramo/core-types'
+import { IMessage, UniqueVerifiableCredential } from '@veramo/core-types'
 import { IAgentPlugin } from '@veramo/core'
 import { Components } from 'react-markdown'
 import { PluggableList } from 'unified'
@@ -84,6 +84,12 @@ export type IAgentExplorerPlugin = {
   /** Returns a react component that will be displayed in the identifier hover component */
   getIdentifierHoverComponent?: () => React.FC<IIdentifierHoverComponentProps>;
 
+  /** Returns an array of supported chat message types */
+  supportedChatMessages?: string[];
+
+  /** Returns a react component for a given DIDComm message */
+  getMessageComponent?: (message: IMessage) => React.FC | undefined;
+
   /** Returns an array of react components and labels that will be displayed as tabs in the indentifier profile page */
   getIdentifierTabsComponents?: () => Array<{ label: string, component: React.FC<IIdentifierTabsComponentProps> }>;