From 5cbb25d4a286a63c77e4ee18c71fbc9faf7ba8b8 Mon Sep 17 00:00:00 2001 From: BlankParticle Date: Thu, 16 May 2024 17:43:27 +0530 Subject: [PATCH] feat: Convo attachments in Sidebar --- .../[orgShortCode]/_components/sidebar.tsx | 2 +- .../[convoId]/_components/chat-sidebar.tsx | 30 ++++++++++++- .../[orgShortCode]/convo/[convoId]/page.tsx | 16 +++++++ pnpm-lock.yaml | 45 ++++++++++++++++--- 4 files changed, 83 insertions(+), 10 deletions(-) diff --git a/apps/web/src/app/[orgShortCode]/_components/sidebar.tsx b/apps/web/src/app/[orgShortCode]/_components/sidebar.tsx index 9e305051..d114feaf 100644 --- a/apps/web/src/app/[orgShortCode]/_components/sidebar.tsx +++ b/apps/web/src/app/[orgShortCode]/_components/sidebar.tsx @@ -241,8 +241,8 @@ function OrgMenu({ collapsed }: { collapsed: boolean }) { method: 'POST', credentials: 'include' }); + queryClient.removeQueries(); router.replace('/'); - await queryClient.invalidateQueries(); }, { onError: (error) => { diff --git a/apps/web/src/app/[orgShortCode]/convo/[convoId]/_components/chat-sidebar.tsx b/apps/web/src/app/[orgShortCode]/convo/[convoId]/_components/chat-sidebar.tsx index a2252ccd..4b45de8a 100644 --- a/apps/web/src/app/[orgShortCode]/convo/[convoId]/_components/chat-sidebar.tsx +++ b/apps/web/src/app/[orgShortCode]/convo/[convoId]/_components/chat-sidebar.tsx @@ -4,6 +4,7 @@ import { cn, generateAvatarUrl, getInitials } from '@/src/lib/utils'; import { Avatar, Box, + Badge, Dialog, Flex, Heading, @@ -32,11 +33,18 @@ import { useRouter } from 'next/navigation'; export default function ChatSideBar({ participants, convoId, - convoHidden + convoHidden, + attachments }: { participants: NonNullable>[]; convoId: TypeId<'convos'>; convoHidden: boolean | null; + attachments: { + name: string; + url: string; + type: string; + publicId: TypeId<'convoAttachments'>; + }[]; }) { const orgShortCode = useGlobalStore((state) => state.currentOrg.shortCode); const [participantOpen, setParticipantOpen] = useState(false); @@ -93,7 +101,8 @@ export default function ChatSideBar({ + className="w-full" + gap="2"> ))} + {attachments.length > 0 ? ( +
+ Attachments +
+ {attachments.map((attachment) => ( + + + {attachment.name} + + + ))} +
+
+ ) : null} diff --git a/apps/web/src/app/[orgShortCode]/convo/[convoId]/page.tsx b/apps/web/src/app/[orgShortCode]/convo/[convoId]/page.tsx index 6b5bef13..1707b6c3 100644 --- a/apps/web/src/app/[orgShortCode]/convo/[convoId]/page.tsx +++ b/apps/web/src/app/[orgShortCode]/convo/[convoId]/page.tsx @@ -39,8 +39,11 @@ import AttachmentButton, { type ConvoAttachmentUpload } from '../new/attachment-button'; import { stringify } from 'superjson'; +import { env } from 'next-runtime-env'; import { type Editor as EditorType } from '@u22n/tiptap/react'; +const STORAGE_URL = env('NEXT_PUBLIC_STORAGE_URL'); + const replyToMessageAtom = atom>(null); const selectedEmailIdentityAtom = atom>(null); @@ -102,6 +105,18 @@ function ConvoView({ convoId }: { convoId: TypeId<'convos'> }) { return messages; }, [data]); + const attachments = useMemo(() => { + if (!convoData) return []; + return convoData.data.attachments + .filter((f) => !f.inline) + .map((attachment) => ({ + name: attachment.fileName, + url: `${STORAGE_URL}/attachment/${orgShortCode}/${attachment.publicId}/${attachment.fileName}`, + type: attachment.type, + publicId: attachment.publicId + })); + }, [convoData, orgShortCode]); + useEffect(() => { const lastMessage = allMessages.at(-1); setReplyTo(() => lastMessage?.publicId ?? null); @@ -243,6 +258,7 @@ function ConvoView({ convoId }: { convoId: TypeId<'convos'> }) { participants={allParticipants} convoId={convoId} convoHidden={convoHidden} + attachments={attachments} /> ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 74d4054f..9829fa64 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -422,7 +422,7 @@ importers: dependencies: '@nuxt/ui': specifier: ^2.15.1 - version: 2.15.1(nuxt@3.11.1(@parcel/watcher@2.4.1)(@planetscale/database@1.16.0)(@types/node@20.12.11)(@upstash/redis@1.28.4)(encoding@0.1.13)(eslint@8.57.0)(ioredis@5.3.2)(optionator@0.9.4)(rollup@4.16.2)(terser@5.29.2)(typescript@5.4.5)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue-tsc@1.8.27(typescript@5.4.5)))(qrcode@1.5.3)(rollup@4.16.2)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue@3.4.24(typescript@5.4.5)) + version: 2.15.1(axios@1.6.8)(nuxt@3.11.1(@parcel/watcher@2.4.1)(@planetscale/database@1.16.0)(@types/node@20.12.11)(@upstash/redis@1.28.4)(encoding@0.1.13)(eslint@8.57.0)(ioredis@5.3.2)(optionator@0.9.4)(rollup@4.16.2)(terser@5.29.2)(typescript@5.4.5)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue-tsc@1.8.27(typescript@5.4.5)))(qrcode@1.5.3)(rollup@4.16.2)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue@3.4.24(typescript@5.4.5)) '@pinia/nuxt': specifier: ^0.5.1 version: 0.5.1(rollup@4.16.2)(typescript@5.4.5)(vue@3.4.24(typescript@5.4.5)) @@ -458,7 +458,7 @@ importers: version: 10.9.0(vue@3.4.24(typescript@5.4.5)) '@vueuse/integrations': specifier: ^10.9.0 - version: 10.9.0(fuse.js@6.6.2)(qrcode@1.5.3)(vue@3.4.24(typescript@5.4.5)) + version: 10.9.0(axios@1.6.8)(fuse.js@6.6.2)(qrcode@1.5.3)(vue@3.4.24(typescript@5.4.5)) '@vueuse/nuxt': specifier: ^10.9.0 version: 10.9.0(nuxt@3.11.1(@parcel/watcher@2.4.1)(@planetscale/database@1.16.0)(@types/node@20.12.11)(@upstash/redis@1.28.4)(encoding@0.1.13)(eslint@8.57.0)(ioredis@5.3.2)(optionator@0.9.4)(rollup@4.16.2)(terser@5.29.2)(typescript@5.4.5)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue-tsc@1.8.27(typescript@5.4.5)))(rollup@4.16.2)(vue@3.4.24(typescript@5.4.5)) @@ -601,7 +601,7 @@ importers: dependencies: '@nuxt/ui': specifier: ^2.14.2 - version: 2.15.1(nuxt@3.11.1(@parcel/watcher@2.4.1)(@planetscale/database@1.16.0)(@types/node@20.12.11)(@upstash/redis@1.28.4)(encoding@0.1.13)(eslint@8.57.0)(ioredis@5.3.2)(optionator@0.9.4)(rollup@4.16.2)(terser@5.29.2)(typescript@5.4.5)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue-tsc@1.8.27(typescript@5.4.5)))(qrcode@1.5.3)(rollup@4.16.2)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue@3.4.24(typescript@5.4.5)) + version: 2.15.1(axios@1.6.8)(nuxt@3.11.1(@parcel/watcher@2.4.1)(@planetscale/database@1.16.0)(@types/node@20.12.11)(@upstash/redis@1.28.4)(encoding@0.1.13)(eslint@8.57.0)(ioredis@5.3.2)(optionator@0.9.4)(rollup@4.16.2)(terser@5.29.2)(typescript@5.4.5)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue-tsc@1.8.27(typescript@5.4.5)))(qrcode@1.5.3)(rollup@4.16.2)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue@3.4.24(typescript@5.4.5)) '@pinia/nuxt': specifier: ^0.5.1 version: 0.5.1(rollup@4.16.2)(typescript@5.4.5)(vue@3.4.24(typescript@5.4.5)) @@ -625,7 +625,7 @@ importers: version: link:../billing '@vueuse/integrations': specifier: ^10.9.0 - version: 10.9.0(fuse.js@6.6.2)(qrcode@1.5.3)(vue@3.4.24(typescript@5.4.5)) + version: 10.9.0(axios@1.6.8)(fuse.js@6.6.2)(qrcode@1.5.3)(vue@3.4.24(typescript@5.4.5)) '@vueuse/nuxt': specifier: ^10.9.0 version: 10.9.0(nuxt@3.11.1(@parcel/watcher@2.4.1)(@planetscale/database@1.16.0)(@types/node@20.12.11)(@upstash/redis@1.28.4)(encoding@0.1.13)(eslint@8.57.0)(ioredis@5.3.2)(optionator@0.9.4)(rollup@4.16.2)(terser@5.29.2)(typescript@5.4.5)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue-tsc@1.8.27(typescript@5.4.5)))(rollup@4.16.2)(vue@3.4.24(typescript@5.4.5)) @@ -4456,6 +4456,9 @@ packages: resolution: {integrity: sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==} engines: {node: '>=4'} + axios@1.6.8: + resolution: {integrity: sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==} + axobject-query@3.2.1: resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==} @@ -5551,6 +5554,15 @@ packages: flatted@3.3.1: resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==} + follow-redirects@1.15.6: + resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==} + engines: {node: '>=4.0'} + peerDependencies: + debug: '*' + peerDependenciesMeta: + debug: + optional: true + for-each@0.3.3: resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==} @@ -7539,6 +7551,9 @@ packages: protocols@2.0.1: resolution: {integrity: sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==} + proxy-from-env@1.1.0: + resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} + psl@1.9.0: resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==} @@ -10721,7 +10736,7 @@ snapshots: '@nuxt/ui-templates@1.3.1': {} - '@nuxt/ui@2.15.1(nuxt@3.11.1(@parcel/watcher@2.4.1)(@planetscale/database@1.16.0)(@types/node@20.12.11)(@upstash/redis@1.28.4)(encoding@0.1.13)(eslint@8.57.0)(ioredis@5.3.2)(optionator@0.9.4)(rollup@4.16.2)(terser@5.29.2)(typescript@5.4.5)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue-tsc@1.8.27(typescript@5.4.5)))(qrcode@1.5.3)(rollup@4.16.2)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue@3.4.24(typescript@5.4.5))': + '@nuxt/ui@2.15.1(axios@1.6.8)(nuxt@3.11.1(@parcel/watcher@2.4.1)(@planetscale/database@1.16.0)(@types/node@20.12.11)(@upstash/redis@1.28.4)(encoding@0.1.13)(eslint@8.57.0)(ioredis@5.3.2)(optionator@0.9.4)(rollup@4.16.2)(terser@5.29.2)(typescript@5.4.5)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue-tsc@1.8.27(typescript@5.4.5)))(qrcode@1.5.3)(rollup@4.16.2)(vite@5.2.8(@types/node@20.12.11)(terser@5.29.2))(vue@3.4.24(typescript@5.4.5))': dependencies: '@egoist/tailwindcss-icons': 1.7.4(tailwindcss@3.4.3) '@headlessui/tailwindcss': 0.2.0(tailwindcss@3.4.3) @@ -10736,7 +10751,7 @@ snapshots: '@tailwindcss/forms': 0.5.7(tailwindcss@3.4.3) '@tailwindcss/typography': 0.5.13(tailwindcss@3.4.3) '@vueuse/core': 10.9.0(vue@3.4.24(typescript@5.4.5)) - '@vueuse/integrations': 10.9.0(fuse.js@6.6.2)(qrcode@1.5.3)(vue@3.4.24(typescript@5.4.5)) + '@vueuse/integrations': 10.9.0(axios@1.6.8)(fuse.js@6.6.2)(qrcode@1.5.3)(vue@3.4.24(typescript@5.4.5)) '@vueuse/math': 10.9.0(vue@3.4.24(typescript@5.4.5)) defu: 6.1.4 fuse.js: 6.6.2 @@ -12921,12 +12936,13 @@ snapshots: - '@vue/composition-api' - vue - '@vueuse/integrations@10.9.0(fuse.js@6.6.2)(qrcode@1.5.3)(vue@3.4.24(typescript@5.4.5))': + '@vueuse/integrations@10.9.0(axios@1.6.8)(fuse.js@6.6.2)(qrcode@1.5.3)(vue@3.4.24(typescript@5.4.5))': dependencies: '@vueuse/core': 10.9.0(vue@3.4.24(typescript@5.4.5)) '@vueuse/shared': 10.9.0(vue@3.4.24(typescript@5.4.5)) vue-demi: 0.14.7(vue@3.4.24(typescript@5.4.5)) optionalDependencies: + axios: 1.6.8 fuse.js: 6.6.2 qrcode: 1.5.3 transitivePeerDependencies: @@ -13226,6 +13242,15 @@ snapshots: axe-core@4.7.0: {} + axios@1.6.8: + dependencies: + follow-redirects: 1.15.6 + form-data: 4.0.0 + proxy-from-env: 1.1.0 + transitivePeerDependencies: + - debug + optional: true + axobject-query@3.2.1: dependencies: dequal: 2.0.3 @@ -14490,6 +14515,9 @@ snapshots: flatted@3.3.1: {} + follow-redirects@1.15.6: + optional: true + for-each@0.3.3: dependencies: is-callable: 1.2.7 @@ -16761,6 +16789,9 @@ snapshots: protocols@2.0.1: {} + proxy-from-env@1.1.0: + optional: true + psl@1.9.0: {} punycode.js@2.3.1: {}