feat: initial reactions support (#216)

* feat: initial reactions support * feat: emoji picker * feat: functioning emoji picker * feat: plugin icons
decentralized-identity · Nov 7, 2023 · 42c625b · 42c625b
1 parent fe48855
commit 42c625b
Show file tree

Hide file tree

Showing 27 changed files with 554 additions and 44 deletions.
diff --git a/packages/agent-explore/package.json b/packages/agent-explore/package.json
@@ -92,6 +92,8 @@
  "@craco/craco": "^7.1.0",
  "@dnd-kit/core": "^6.0.8",
  "@dnd-kit/sortable": "^7.0.2",
+ "@emoji-mart/data": "^1.1.2",
+ "@emoji-mart/react": "^1.1.1",
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^14.0.0",
  "@testing-library/user-event": "^14.4.3",

diff --git a/packages/agent-explore/src/components/ResponsiveContainer.tsx b/packages/agent-explore/src/components/ResponsiveContainer.tsx
@@ -0,0 +1,23 @@
+import { Row, Col } from "antd"
+import { PropsWithChildren } from "react"
+
+export const ResponsiveContainer: React.FC<PropsWithChildren> = ({
+ children
+}) => {
+ return (<Row>
+ <Col 
+ lg={3}
+ />
+ <Col 
+ lg={18}
+ sm={24}
+ xs={24}
+ style={{position: 'relative'}}
+ >
+ {children} 
+ </Col>
+ <Col 
+ lg={3}
+ />
+ </Row>)
+}
diff --git a/packages/agent-explore/src/pages/settings/Agents.tsx b/packages/agent-explore/src/pages/settings/Agents.tsx
@@ -9,6 +9,7 @@ import { PageContainer, ProList } from '@ant-design/pro-components'
 import md5 from 'md5'
 import { Connect } from './Connect'
 import { useParams } from 'react-router'
+import { ResponsiveContainer } from '../../components/ResponsiveContainer'
 
 const GRAVATAR_URI = 'https://www.gravatar.com/avatar/'
 
@@ -31,6 +32,7 @@ export const Agents = () => {
  />,
  ]}
  >
+ <ResponsiveContainer>
  <ProList<{ title: string, id: string }>
  rowKey="id"
  ghost
@@ -40,7 +42,6 @@ export const Agents = () => {
  avatar: agent?.context?.name && GRAVATAR_URI + md5(agent?.context?.name) + '?s=200&d=retro',
  title: agent.context.name || 'Empty',
  actions: [
- agent.context.id === 'web3Agent' && <w3m-network-button />,
  agent.context.id !== 'web3Agent' && <Button
  icon={<DeleteOutlined />}
  type='text'
@@ -72,6 +73,7 @@ export const Agents = () => {
  subTitle: {},
  }}
  />
+ </ResponsiveContainer>
  <Drawer
  title="Add new agent connection"
  placement={'right'}

diff --git a/packages/agent-explore/src/pages/settings/Appearance.tsx b/packages/agent-explore/src/pages/settings/Appearance.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Button, Checkbox, Radio, Space, Typography } from 'antd'
 import { useTheme } from '../../context/ThemeProvider'
 import { PageContainer } from '@ant-design/pro-components'
+import { ResponsiveContainer } from '../../components/ResponsiveContainer'
 
 const colors = [
  '#017AFF',
@@ -33,6 +34,7 @@ export const Appearance = () => {
  const { theme, switchTheme, isCompact, setIsCompact, switchPrimaryColor, primaryColor } = useTheme()
  return (
  <PageContainer>
+ <ResponsiveContainer>
  <Space direction='vertical'>
 
  <Radio.Group value={theme} onChange={(e) => switchTheme(e.target.value)}>
@@ -66,6 +68,7 @@ export const Appearance = () => {
  />)}
  </Space>
  </Space>
+ </ResponsiveContainer>
  </PageContainer>
  )
 }

diff --git a/packages/agent-explore/src/pages/settings/Plugins.tsx b/packages/agent-explore/src/pages/settings/Plugins.tsx
@@ -15,6 +15,7 @@ import { SortableContext, useSortable, verticalListSortingStrategy, sortableKeyb
 import {CSS} from '@dnd-kit/utilities';
 import { IAgentExplorerPlugin } from '@veramo-community/agent-explorer-plugin'
 import { communityPlugins } from '../../plugins/community'
+import { ResponsiveContainer } from '../../components/ResponsiveContainer'
 
 const SortableItem = ({ item }: { item: IAgentExplorerPlugin}) => {
  const { notification } = App.useApp()
@@ -45,6 +46,7 @@ const SortableItem = ({ item }: { item: IAgentExplorerPlugin}) => {
  style={{ transform: CSS.Transform.toString(transform), transition }}
  actions={actions}
  ><List.Item.Meta
+ avatar={<Typography.Text style={{fontSize: 26}}>{item.icon}</Typography.Text>}
  title={item.name}
  description={<Popover content={`${item.config?.url}${item.config?.commitId ? ` @ ${item.config?.commitId}` : ''}`}>{item.description}</Popover>}
 
@@ -100,6 +102,7 @@ export const Plugins = () => {
  >Add</Button>,
  ]}
  >
+ <ResponsiveContainer>
 
  <SortableContext 
  items={plugins.map((plugin) => plugin.config?.url || '')} 
@@ -111,7 +114,7 @@ export const Plugins = () => {
  />
  </SortableContext>
  <DragOverlay />
-
+ </ResponsiveContainer>
  <Drawer
  title="Add external plugin"
  placement={'right'}

diff --git a/packages/agent-explore/src/pages/settings/Version.tsx b/packages/agent-explore/src/pages/settings/Version.tsx
@@ -2,19 +2,22 @@ import React from 'react'
 import { Typography, Space } from 'antd'
 import packageJson from '../../../package.json'
 import { PageContainer } from '@ant-design/pro-components'
+import { ResponsiveContainer } from '../../components/ResponsiveContainer'
 
 export const Version: React.FC<{
  versionOnly?: boolean
 }> = ({ versionOnly }) => (
  <PageContainer>
- <Space direction="vertical">
- <Typography.Text>v{packageJson.version}</Typography.Text>
- {!versionOnly && (
- <Typography.Text>
- <b>License:</b> {packageJson.license}
- </Typography.Text>
- )}
- </Space>
+ <ResponsiveContainer>
+ <Space direction="vertical">
+ <Typography.Text>v{packageJson.version}</Typography.Text>
+ {!versionOnly && (
+ <Typography.Text>
+ <b>License:</b> {packageJson.license}
+ </Typography.Text>
+ )}
+ </Space>
+ </ResponsiveContainer>
  </PageContainer>
 )
 
diff --git a/packages/agent-explore/src/plugins/audit-log/index.tsx b/packages/agent-explore/src/plugins/audit-log/index.tsx
@@ -13,6 +13,7 @@ const Plugin: IPlugin = {
  },
  name: 'Audit Log',
  description: 'System messages',
+ icon: <BarsOutlined />,
  requiredMethods: ['dataStoreORMGetMessages'],
  routes: [
  {

diff --git a/packages/agent-explore/src/plugins/chats/index.tsx b/packages/agent-explore/src/plugins/chats/index.tsx
@@ -13,6 +13,7 @@ const Plugin: IPlugin = {
  },
  name: 'Chats',
  description: 'DIDComm Chats',
+ icon: <MessageOutlined />,
  requiredMethods: ['packDIDCommMessage', 'sendDIDCommMessage'],
  routes: [
  {

diff --git a/packages/agent-explore/src/plugins/community.ts b/packages/agent-explore/src/plugins/community.ts
@@ -4,7 +4,7 @@ export const communityPlugins: IAgentExplorerPlugin[] = [
  {
  "config": {
  "url": "github://veramolabs/agent-explorer-plugin-brainshare",
- "commitId": "64c28a4f84785d44d4a73305d5d0c5216af4e518",
+ "commitId": "23a729c3510ca712b4f8f7ba5d492f38303737a5",
  "enabled": true
  },
  "name": "Brain share",
@@ -16,7 +16,7 @@ export const communityPlugins: IAgentExplorerPlugin[] = [
  {
  "config": {
  "url": "github://veramolabs/agent-explorer-plugin-gitcoin-passport",
- "commitId": "3f6770aa1b5a85f157611e90043419869b12ab45",
+ "commitId": "a9a67158026a0b195dcfabf476eed4a0ce7faf27",
  "enabled": true
  },
  "name": "Gitcoin passport",
@@ -28,7 +28,7 @@ export const communityPlugins: IAgentExplorerPlugin[] = [
  {
  "config": {
  "url": "github://veramolabs/agent-explorer-plugin-kudos",
- "commitId": "c327b6ae48d5706ec5ac413c756a7e39142e98a1",
+ "commitId": "e2535b295ef91c6c85d3530313ec5ed5c5aefb4c",
  "enabled": true
  },
  "name": "Kudos",
@@ -40,7 +40,7 @@ export const communityPlugins: IAgentExplorerPlugin[] = [
  {
  "config": {
  "url": "github://veramolabs/agent-explorer-plugin-graph-view",
- "commitId": "01dac46e7fc23d10f341699cc18796e4e08855d0",
+ "commitId": "774792e3d43f9d76c4cdeb8bdd4ad1252b009983",
  "enabled": true
  },
  "name": "Graph View",
@@ -52,7 +52,7 @@ export const communityPlugins: IAgentExplorerPlugin[] = [
  {
  "config": {
  "url": "github://veramolabs/agent-explorer-plugin-social-feed",
- "commitId": "7612fc916087802f0ebf1f7589879fa14d3b717c",
+ "commitId": "57a8c61dcb6027b54c8e467195f9bb972ba2d3be",
  "enabled": true
  },
  "name": "Social Feed",
@@ -64,7 +64,7 @@ export const communityPlugins: IAgentExplorerPlugin[] = [
  {
  "config": {
  "url": "github://veramolabs/agent-explorer-plugin-developer-tools",
- "commitId": "9d4085ab8bfd75428fae0c980ef11b6cf89407f4",
+ "commitId": "ef9039787e2988c57b0c7d7a2fd0f709398c835f",
  "enabled": true
  },
  "name": "Developer Tools",
@@ -76,7 +76,7 @@ export const communityPlugins: IAgentExplorerPlugin[] = [
  {
  "config": {
  "url": "github://simonas-notcat/agent-explorer-plugin-codyfight",
- "commitId": "326b878ecbc2000d1d3cdd9827a51eed569408bf",
+ "commitId": "d62ad186abd000147b1ead404bcd3adcf57315ab",
  "enabled": true
  },
  "name": "Codyfight",

diff --git a/packages/agent-explore/src/plugins/contacts/index.tsx b/packages/agent-explore/src/plugins/contacts/index.tsx
@@ -15,6 +15,7 @@ const Plugin: IPlugin = {
  },
  name: 'Contacts',
  description: 'Explore contacts',
+ icon: <ContactsOutlined />,
  requiredMethods: ['dataStoreORMGetIdentifiers'],
  routes: [
  {

diff --git a/packages/agent-explore/src/plugins/credential-verifier/index.tsx b/packages/agent-explore/src/plugins/credential-verifier/index.tsx
@@ -13,6 +13,7 @@ const Plugin: IPlugin = {
  },
  name: 'Credential verifier',
  description: 'Verify any supported credential type',
+ icon: <FileProtectOutlined />,
  requiredMethods: ['verifyCredential'],
  routes: [
  {

diff --git a/packages/agent-explore/src/plugins/credentials/Credential.tsx b/packages/agent-explore/src/plugins/credentials/Credential.tsx
@@ -14,7 +14,7 @@ const Credential = () => {
  const { agent } = useVeramo<IDataStore>()
 
  const { data: credential, isLoading: credentialLoading } = useQuery(
- ['credential', { id }],
+ ['credential', { id, agentId: agent?.context.id }],
  () => agent?.dataStoreGetVerifiableCredential({ hash: id! }),
  )
 

diff --git a/packages/agent-explore/src/plugins/credentials/index.tsx b/packages/agent-explore/src/plugins/credentials/index.tsx
@@ -17,6 +17,7 @@ const Plugin: IPlugin = {
  },
  name: 'Verifiable credentials',
  description: 'Explore known verifiable credentials',
+ icon: <SafetyOutlined />,
  requiredMethods: ['dataStoreORMGetVerifiableCredentials'],
  routes: [
  {

diff --git a/packages/agent-explore/src/plugins/identifiers/index.tsx b/packages/agent-explore/src/plugins/identifiers/index.tsx
@@ -17,6 +17,7 @@ const Plugin: IPlugin = {
  },
  name: 'Identifiers',
  description: 'Manage identifiers',
+ icon: <UserOutlined />,
  requiredMethods: ['didManagerFind'],
  routes: [
  {

diff --git a/packages/agent-explore/src/plugins/index.ts b/packages/agent-explore/src/plugins/index.ts
@@ -8,10 +8,12 @@ import Credentials from './credentials'
 import Requests from './requests'
 import Chats from './chats'
 import Profile from './profile'
+import Reactions from './reactions'
 import { communityPlugins } from './community'
 
 const corePlugins: IPlugin[] = [
  Profile,
+ Reactions,
  Statistics,
  Identifiers,
  Credentials,
@@ -26,9 +28,9 @@ export function getcorePlugins(): IAgentExplorerPlugin[] {
  return [
  // FIXME: Temporary workaround
  communityPlugins[0], 
+ communityPlugins[3], 
+ ...corePlugins.map(plugin => plugin.init()),
  communityPlugins[1], 
  communityPlugins[2], 
- communityPlugins[3], 
- ...corePlugins.map(plugin => plugin.init())
  ]
 }
diff --git a/packages/agent-explore/src/plugins/profile/index.tsx b/packages/agent-explore/src/plugins/profile/index.tsx
@@ -3,6 +3,7 @@ import { IdentifierHoverComponent } from './IdentifierHoverComponent';
 import { IdentifierTabComponent } from './IdentifierTabComponent';
 import { UniqueVerifiableCredential } from '@veramo/core-types';
 import { Profile } from './Profile';
+import { SolutionOutlined } from '@ant-design/icons';
 
 const Plugin: IPlugin = {
  init: () => {
@@ -13,6 +14,7 @@ const Plugin: IPlugin = {
  },
  name: 'Profile',
  description: 'Provides support for profile credentials',
+ icon: <SolutionOutlined />,
  requiredMethods: [],
  getIdentifierHoverComponent: () => IdentifierHoverComponent,
  getCredentialComponent: (credential: UniqueVerifiableCredential) => {