@webinex/chatify 2.0.0-alpha1 → 2.0.0-alpha10

package/src/audit/auditApi.tsx

@@ -0,0 +1,113 @@
+import { PagingRule } from '@webinex/asky';
+import { Account, chatifyApi, File, ListSegment, Optional } from '@webinex/chatify';
+
+export interface GetAuditChatListQueryArgs {
+  containsOneOfMembers: string[] | null;
+  searchString: string | null;
+  pagingRule: PagingRule | null;
+  includeTotal: boolean | null;
+}
+
+export interface AuditChatResponse {
+  id: string;
+  workspaceId: string;
+  name: string;
+  createdAt: string;
+  createdById: string;
+  lastMessage: Optional<AuditChatMessage>;
+}
+
+export interface AuditChatMessage {
+  id: string;
+  authorId: string;
+  sentAt: string;
+  text: string | null;
+  files: File[];
+  sentBy: Account;
+}
+
+export interface AuditChatListItem {
+  id: string;
+  workspaceId: string;
+  name: string;
+  createdAt: string;
+  createdById: string;
+  lastMessage: AuditChatMessage;
+}
+
+export interface AuditChat {
+  id: string;
+  workspaceId: string;
+  name: string;
+  createdAt: string;
+  createdById: string;
+}
+
+function qs(params: Record<string, any>): string {
+  const query = new URLSearchParams();
+  Object.entries(params).forEach(([key, value]) => {
+    if (value !== null && value !== undefined) {
+      query.append(key, typeof value === 'string' ? value : JSON.stringify(value));
+    }
+  });
+
+  return query.toString();
+}
+
+export const auditApi = chatifyApi.injectEndpoints({
+  endpoints: (build) => ({
+    getAuditChatList: build.query<ListSegment<AuditChatListItem>, GetAuditChatListQueryArgs>({
+      queryFn: async (args) =>
+        chatifyApi.settings.client.axios
+          .get<ListSegment<AuditChatResponse>>(`audit/chats?${qs({ query: args })}`)
+          .then(({ data }) => ({
+            data: {
+              total: data.total,
+              items: data.items.map(
+                ({ lastMessage, ...x }): AuditChatListItem => ({ ...x, lastMessage: lastMessage.value! }),
+              ),
+            },
+          }))
+          .catch((error) => ({ error })),
+      providesTags: ['chat', 'message'],
+    }),
+
+    getAuditChat: build.query<AuditChat, { id: string }>({
+      queryFn: async (args) =>
+        chatifyApi.settings.client.axios
+          .get(`audit/chats/${encodeURIComponent(args.id)}`)
+          .then(({ data }) => ({ data }))
+          .catch((error) => ({ error })),
+      providesTags: ['chat'],
+    }),
+
+    getAuditChatMessagesInfinite: build.infiniteQuery<
+      ListSegment<AuditChatMessage>,
+      { id: string },
+      { skip: number; take: number }
+    >({
+      queryFn: async (args) => {
+        const {
+          pageParam,
+          queryArg: { id },
+        } = args;
+
+        return chatifyApi.settings.client.axios
+          .get(`audit/messages?${qs({ query: { chatId: id, pagingRule: pageParam, includeTotal: true } })}`)
+          .then(({ data }) => ({ data }))
+          .catch((error) => ({ error }));
+      },
+      infiniteQueryOptions: {
+        initialPageParam: { skip: 0, take: 20 },
+        getNextPageParam: (lastPage, _, lastPageParam) =>
+          lastPage.total > lastPageParam.skip + lastPageParam.take
+            ? {
+                skip: lastPageParam.skip + lastPageParam.take,
+                take: lastPageParam.take,
+              }
+            : undefined,
+      },
+      providesTags: ['message', 'chat'],
+    }),
+  }),
+});

package/src/audit/index.d.ts

@@ -0,0 +1,18 @@
+import { Account } from '@/core';
+import { AuditPanel } from './AuditPanel';
+
+declare module '@webinex/chatify' {
+  interface ChatifyType {
+    Audit: typeof AuditPanel;
+  }
+
+  interface Localizer {
+    audit: {
+      searchPlaceholder: string;
+      noChatFound: string;
+      noInputBlurb: string;
+      textSearchOption: (searchValue: string) => JSX.Element;
+      memberSearchOption: (account: Account) => JSX.Element;
+    };
+  }
+}

package/src/audit/index.tsx

@@ -0,0 +1,28 @@
+import { Space } from 'antd';
+import { AuditPanel } from './AuditPanel';
+import './index.d';
+import './styles.scss';
+import { Avatar, Chatify, defaultLocalizer } from '@webinex/chatify';
+
+export * from './AuditPanel';
+export * from './AuditPanelCustomizeValue';
+export * from './AuditChatList';
+export * from './AuditSearchValue';
+export * from './AuditSearch';
+export * from './auditApi';
+export * from './AuditConversationPanel';
+
+Chatify.Audit = AuditPanel;
+
+defaultLocalizer.audit = {
+  searchPlaceholder: 'Search chats by chat name or member name',
+  noChatFound: 'No chats found',
+  noInputBlurb: 'Start typing to search',
+  textSearchOption: (text) => <span>{`Chat name includes "${text}"`}</span>,
+  memberSearchOption: (account) => (
+    <Space>
+      <Avatar account={account} />
+      {`Chat includes "${account.name}"`}
+    </Space>
+  ),
+};

package/src/audit/styles.scss

@@ -0,0 +1,72 @@
+@use '../styles/variables.scss' as vars;
+@use '../styles/mixins.scss' as mixins;
+
+.wxchtf-audit-panel {
+  display: flex;
+  flex-flow: column nowrap;
+  background: vars.$background;
+  border-radius: vars.$radius;
+
+  .wxchtf-search {
+    text-align: center;
+    flex: none;
+    padding-block: 0.5rem;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 50px;
+      pointer-events: none;
+      background: linear-gradient(to top, #006e720a, #0000 30%);
+    }
+
+    .wxchtf-search-select {
+      width: 100%;
+      max-width: 700px;
+    }
+  }
+
+  .wxchtf-chat-list {
+    flex: 1;
+    padding-top: 8px;
+    height: 100%;
+    min-height: 0;
+    border-bottom-left-radius: vars.$radius;
+    border-bottom-right-radius: vars.$radius;
+  }
+
+  .wxchtf-audit-body {
+    min-height: 0;
+
+    .ant-empty {
+      padding-top: 2rem;
+    }
+
+    &.--conversation-opened {
+      display: flex;
+      flex-flow: row nowrap;
+      flex: 1;
+
+      .wxchtf-chat-list {
+        flex: none;
+        height: 100%;
+        min-height: 0;
+        width: 400px;
+        border-bottom-left-radius: vars.$radius;
+        border-bottom-right-radius: 0;
+      }
+
+      .wxchtf-conversation {
+        z-index: 2;
+        min-width: 0;
+        box-shadow: 0px 6px 30px 0px #0cd9e214, 0px 1px 12px 0px #006e720f;
+        border-bottom-right-radius: vars.$radius;
+        overflow: hidden;
+      }
+    }
+  }
+}