feat: Convo attachments in Sidebar

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) => {

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<ReturnType<typeof formatParticipantData>>[];
   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({
       <Flex className="border-gray-11 h-full w-full border-l">
         <Flex
           direction="column"
-          className="w-full">
+          className="w-full"
+          gap="2">
           <Flex
             className="w-full p-1"
             justify="between"
@@ -168,6 +177,23 @@ export default function ChatSideBar({
               </Flex>
             ))}
           </Flex>
+          {attachments.length > 0 ? (
+            <div className="flex flex-col gap-2 px-2">
+              <span className="font-bold">Attachments</span>
+              <div className="flex w-full flex-wrap gap-2">
+                {attachments.map((attachment) => (
+                  <a
+                    target="_blank"
+                    key={attachment.publicId}
+                    href={attachment.url}>
+                    <Badge className="flex w-fit max-w-full truncate p-1">
+                      {attachment.name}
+                    </Badge>
+                  </a>
+                ))}
+              </div>
+            </div>
+          ) : null}
         </Flex>
       </Flex>
       <ModalRoot />

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 | TypeId<'convoEntries'>>(null);
 const selectedEmailIdentityAtom = atom<null | TypeId<'emailIdentities'>>(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}
       />
     </Flex>
   );