ECHO-415 ECHO-417 add auto chat titles and fix issues with rendering

echo/frontend/src/components/chat/ChatAccordion.tsx

@@ -10,7 +10,6 @@ import {
   Accordion,
   ActionIcon,
   Group,
-  LoadingOverlay,
   Menu,
   Stack,
   Text,
@@ -27,7 +26,13 @@ import { Suspense, useEffect } from "react";
 import { ChatSkeleton } from "./ChatSkeleton";
 import { useInView } from "react-intersection-observer";
 
-const ChatAccordionItemMenu = ({ chat }: { chat: Partial<ProjectChat> }) => {
+export const ChatAccordionItemMenu = ({
+  chat,
+  size = "sm",
+}: {
+  chat: Partial<ProjectChat>;
+  size?: "sm" | "md";
+}) => {
   const deleteChatMutation = useDeleteChatMutation();
   const updateChatMutation = useUpdateChatMutation();
   const navigate = useI18nNavigate();
@@ -38,6 +43,7 @@ const ChatAccordionItemMenu = ({ chat }: { chat: Partial<ProjectChat> }) => {
         <ActionIcon
           variant="transparent"
           c="gray"
+          size={size}
           className="flex items-center justify-center"
         >
           <IconDotsVertical />
@@ -69,11 +75,13 @@ const ChatAccordionItemMenu = ({ chat }: { chat: Partial<ProjectChat> }) => {
             leftSection={<IconTrash />}
             disabled={deleteChatMutation.isPending}
             onClick={() => {
+              if (confirm(`Are you sure you want to delete this chat?`)) { 
               deleteChatMutation.mutate({
                 chatId: chat.id ?? "",
-                projectId: (chat.project_id as string) ?? "",
-              });
-              navigate(`/projects/${chat.project_id}/overview`);
+                  projectId: (chat.project_id as string) ?? "",
+                });
+                navigate(`/projects/${chat.project_id}/overview`);
+              }
             }}
           >
             <Trans id="project.sidebar.chat.delete">Delete</Trans>
@@ -196,30 +204,41 @@ export const ChatAccordionMain = ({ projectId }: { projectId: string }) => {
               }
               ref={index === allChats.length - 1 ? loadMoreRef : undefined}
             >
-              <Text size="xs">
-                {item.name
-                  ? item.name
-                  : formatRelative(
+              <Stack gap="xs">
+                <Text size="sm">
+                  {item.name
+                    ? item.name
+                    : formatRelative(
+                        new Date(item.date_created ?? new Date()),
+                        new Date(),
+                      )}
+                </Text>
+
+                {item.name && (
+                  <Text size="xs" c="gray.6">
+                    {formatRelative(
                       new Date(item.date_created ?? new Date()),
                       new Date(),
                     )}
-              </Text>
+                  </Text>
+                )}
+              </Stack>
             </NavigationButton>
           ))}
           {chatsQuery.isFetchingNextPage && (
             <Center py="md">
               <Loader size="sm" />
             </Center>
           )}
-          {!chatsQuery.hasNextPage && allChats.length > 0 && (
+          {/* {!chatsQuery.hasNextPage && allChats.length > 0 && (
             <Center py="md">
               <Text size="xs" c="dimmed" ta="center" fs="italic">
                 <Trans id="project.sidebar.chat.end.description">
                   End of list • All {totalChats} chats loaded
                 </Trans>
               </Text>
             </Center>
-          )}
+          )} */}
         </Stack>
       </Accordion.Panel>
     </Accordion.Item>

echo/frontend/src/components/chat/hooks/index.ts

@@ -18,7 +18,7 @@ import {
   useQuery,
   useQueryClient,
   useSuspenseQuery,
-  useInfiniteQuery,
+  useSuspenseInfiniteQuery,
 } from "@tanstack/react-query";
 import { toast } from "@/components/common/Toaster";
 
@@ -164,7 +164,8 @@ export const useInfiniteProjectChats = (
 ) => {
   const { initialLimit = 15 } = options ?? {};
 
-  return useInfiniteQuery({
+  return useSuspenseInfiniteQuery({
+    refetchInterval: 30000,
     queryKey: ["projects", projectId, "chats", "infinite", query],
     queryFn: async ({ pageParam = 0 }) => {
       const response = await directus.request(

echo/frontend/src/components/common/ScrollToBottom.tsx

@@ -1,5 +1,5 @@
 import { t } from "@lingui/core/macro";
-import { ActionIcon } from "@mantine/core";
+import { ActionIcon, Tooltip } from "@mantine/core";
 import { IconArrowDown } from "@tabler/icons-react";
 
 interface ScrollToBottomButtonProps {
@@ -18,15 +18,17 @@ export const ScrollToBottomButton = ({
   if (isVisible) return null; // Hide when visible
 
   return (
-    <ActionIcon
-      variant="default"
-      radius="xl"
-      size={32}
-      aria-label={t`Scroll to bottom`}
-      className="rounded-full"
-      onClick={scrollToBottom}
-    >
-      <IconArrowDown style={{ width: "70%", height: "70%" }} stroke={2} />
-    </ActionIcon>
+    <Tooltip label={t`Scroll to bottom`}>
+      <ActionIcon
+        variant="default"
+        radius="xl"
+        size={32}
+        aria-label={t`Scroll to bottom`}
+        className="rounded-full"
+        onClick={scrollToBottom}
+      >
+        <IconArrowDown style={{ width: "70%", height: "70%" }} stroke={2} />
+      </ActionIcon>
+    </Tooltip>
   );
 };

echo/frontend/src/components/conversation/ConversationAccordion.tsx

@@ -936,7 +936,7 @@ export const ConversationAccordion = ({ projectId }: { projectId: string }) => {
                 <Loader size="sm" />
               </Center>
             )}
-            {!conversationsQuery.hasNextPage &&
+            {/* {!conversationsQuery.hasNextPage &&
               allConversations.length > 0 &&
               debouncedConversationSearchValue === "" && (
                 <Center py="md">
@@ -948,7 +948,7 @@ export const ConversationAccordion = ({ projectId }: { projectId: string }) => {
                     </Trans>
                   </Text>
                 </Center>
-              )}
+              )} */}
             {/* Temporarily disabled source filters */}
             {/* {allConversations.length === 0 &&
               filterBySource.length === 0 && (

echo/frontend/src/components/project/ProjectAccordion.tsx

@@ -4,7 +4,7 @@ import { ConversationAccordion } from "../conversation/ConversationAccordion";
 
 export const ProjectAccordion = ({ projectId }: { projectId: string }) => {
   return (
-    <Accordion pb="lg" multiple defaultValue={["conversations"]}>
+    <Accordion pb="lg"  multiple defaultValue={["conversations"]}>
       <ChatAccordion projectId={projectId} />
       {/* <ResourceAccordion projectId={projectId} /> */}
       <ConversationAccordion projectId={projectId} />

echo/frontend/src/locales/de-DE.po

@@ -68,6 +68,11 @@ msgstr "Etwas ist schief gelaufen"
 #~ msgid "conversation.accordion.skeleton.title"
 #~ msgstr "Gespräche"
 
+#. js-lingui-explicit-id
+#: src/components/chat/ChatAccordion.tsx:217
+#~ msgid "project.sidebar.chat.end.description"
+#~ msgstr "Ende der Liste • Alle {0} Gespräche geladen"
+
 #. js-lingui-explicit-id
 #: src/routes/project/library/ProjectLibrary.tsx:249
 msgid "library.generate.duration.message"
@@ -88,7 +93,7 @@ msgstr "(für verbesserte Audioverarbeitung)"
 #. placeholder {0}: isAssistantTyping ? "Assistant is typing..." : "Thinking..."
 #. placeholder {0}: showPreview ? "Hide Preview" : "Show Preview"
 #. placeholder {0}: citation.reference_text
-#: src/routes/project/chat/ProjectChatRoute.tsx:411
+#: src/routes/project/chat/ProjectChatRoute.tsx:422
 #: src/components/project/ProjectPortalEditor.tsx:262
 #: src/components/chat/References.tsx:27
 msgid "{0}"
@@ -187,7 +192,7 @@ msgstr "Zu diesem Chat hinzufügen"
 msgid "Added emails"
 msgstr "Hinzugefügte E-Mails"
 
-#: src/routes/project/chat/ProjectChatRoute.tsx:499
+#: src/routes/project/chat/ProjectChatRoute.tsx:510
 msgid "Adding Context:"
 msgstr "Kontext wird hinzugefügt:"
 
@@ -237,7 +242,7 @@ msgstr "Eine E-Mail-Benachrichtigung wird an {0} Teilnehmer{1} gesendet. Möchte
 msgid "An error occurred while loading the Portal. Please contact the support team."
 msgstr "Beim Laden des Portals ist ein Fehler aufgetreten. Bitte kontaktieren Sie das Support-Team."
 
-#: src/routes/project/chat/ProjectChatRoute.tsx:448
+#: src/routes/project/chat/ProjectChatRoute.tsx:459
 msgid "An error occurred."
 msgstr "Ein Fehler ist aufgetreten."
 
@@ -448,12 +453,12 @@ msgstr "Änderungen werden automatisch gespeichert"
 msgid "Changing language during an active chat may lead to unexpected results. It's recommended to start a new chat after changing the language. Are you sure you want to continue?"
 msgstr "Das Ändern der Sprache während eines aktiven Chats kann unerwartete Ergebnisse hervorrufen. Es wird empfohlen, ein neues Gespräch zu beginnen, nachdem die Sprache geändert wurde. Sind Sie sicher, dass Sie fortfahren möchten?"
 
-#: src/routes/project/chat/ProjectChatRoute.tsx:344
-#: src/routes/project/chat/ProjectChatRoute.tsx:348
+#: src/routes/project/chat/ProjectChatRoute.tsx:347
+#: src/routes/project/chat/ProjectChatRoute.tsx:351
 msgid "Chat"
 msgstr "Chat"
 
-#: src/routes/project/chat/ProjectChatRoute.tsx:264
+#: src/routes/project/chat/ProjectChatRoute.tsx:267
 msgid "Chat | Dembrane"
 msgstr "Chat | Dembrane"
 
@@ -463,7 +468,7 @@ msgid "chat.accordion.skeleton.title"
 msgstr "Chat"
 
 #. js-lingui-explicit-id
-#: src/components/chat/ChatAccordion.tsx:175
+#: src/components/chat/ChatAccordion.tsx:183
 msgid "project.sidebar.chat.title"
 msgstr "Chat"
 
@@ -703,7 +708,7 @@ msgid "Danger Zone"
 msgstr "Gefahrenbereich"
 
 #. js-lingui-explicit-id
-#: src/components/chat/ChatAccordion.tsx:79
+#: src/components/chat/ChatAccordion.tsx:87
 msgid "project.sidebar.chat.delete"
 msgstr "Chat löschen"
 
@@ -874,15 +879,9 @@ msgstr "Aktivieren Sie diese Funktion, um Teilnehmern die Möglichkeit zu geben,
 msgid "Enabled"
 msgstr "Aktiviert"
 
-#. placeholder {0}: totalConversations ?? allConversations.length
 #: src/components/conversation/ConversationAccordion.tsx:944
-msgid "End of list • All {0} conversations loaded"
-msgstr "Ende der Liste • Alle {0} Gespräche geladen"
-
-#. js-lingui-explicit-id
-#: src/components/chat/ChatAccordion.tsx:217
-msgid "project.sidebar.chat.end.description"
-msgstr "Ende der Liste • Alle {0} Gespräche geladen"
+#~ msgid "End of list • All {0} conversations loaded"
+#~ msgstr "Ende der Liste • Alle {0} Gespräche geladen"
 
 #: src/components/project/ProjectPortalEditor.tsx:293
 msgid "English"
@@ -900,7 +899,7 @@ msgstr "Geben Sie einen Namen für das neue Gespräch ein"
 msgid "Enter filename (without extension)"
 msgstr "Dateiname eingeben (ohne Erweiterung)"
 
-#: src/components/chat/ChatAccordion.tsx:54
+#: src/components/chat/ChatAccordion.tsx:60
 msgid "Enter new name for the chat:"
 msgstr "Geben Sie einen neuen Namen für den Chat ein:"
 
@@ -1508,7 +1507,7 @@ msgid "No announcements available"
 msgstr "Keine Ankündigungen verfügbar"
 
 #. js-lingui-explicit-id
-#: src/components/chat/ChatAccordion.tsx:184
+#: src/components/chat/ChatAccordion.tsx:192
 msgid "project.sidebar.chat.empty.description"
 msgstr "Keine Chats gefunden. Starten Sie einen Chat mit dem \"Fragen\"-Button."
 
@@ -1594,7 +1593,7 @@ msgstr "Kein Transkript verfügbar"
 msgid "No transcript exists for this conversation yet. Please check back later."
 msgstr "Noch kein Transkript für dieses Gespräch vorhanden. Bitte später erneut prüfen."
 
-#: src/routes/project/chat/ProjectChatRoute.tsx:489
+#: src/routes/project/chat/ProjectChatRoute.tsx:500
 msgid "No transcripts are selected for this chat"
 msgstr "Für diesen Chat sind keine Transkripte ausgewählt"
 
@@ -2014,7 +2013,7 @@ msgid "Remove from this chat"
 msgstr "Aus diesem Chat entfernen"
 
 #. js-lingui-explicit-id
-#: src/components/chat/ChatAccordion.tsx:66
+#: src/components/chat/ChatAccordion.tsx:72
 msgid "project.sidebar.chat.rename"
 msgstr "Umbenennen"
 
@@ -2122,7 +2121,7 @@ msgstr "Gespräch hertranskribieren"
 msgid "Retranscription started. New conversation will be available soon."
 msgstr "Hertranskription gestartet. Das neue Gespräch wird bald verfügbar sein."
 
-#: src/routes/project/chat/ProjectChatRoute.tsx:456
+#: src/routes/project/chat/ProjectChatRoute.tsx:467
 msgid "Retry"
 msgstr "Erneut versuchen"
 
@@ -2146,7 +2145,8 @@ msgstr "Speichern fehlgeschlagen!"
 msgid "Saving..."
 msgstr "Speichern..."
 
-#: src/components/common/ScrollToBottom.tsx:25
+#: src/components/common/ScrollToBottom.tsx:21
+#: src/components/common/ScrollToBottom.tsx:26
 msgid "Scroll to bottom"
 msgstr "Nach unten scrollen"
 
@@ -2234,7 +2234,7 @@ msgstr "Ausgewählte Dateien ({0}/{MAX_FILES})"
 msgid "participant.selected.microphone"
 msgstr "Ausgewähltes Mikrofon"
 
-#: src/routes/project/chat/ProjectChatRoute.tsx:560
+#: src/routes/project/chat/ProjectChatRoute.tsx:571
 msgid "Send"
 msgstr "Senden"
 
@@ -2424,7 +2424,7 @@ msgstr "Neues Gespräch starten"
 msgid "Status"
 msgstr "Status"
 
-#: src/routes/project/chat/ProjectChatRoute.tsx:422
+#: src/routes/project/chat/ProjectChatRoute.tsx:433
 msgid "Stop"
 msgstr "Stopp"
 
@@ -2655,7 +2655,7 @@ msgstr "Dieser Bericht wurde von {0} Personen geöffnet"
 msgid "This title is shown to participants when they start a conversation"
 msgstr "Dieser Titel wird den Teilnehmern angezeigt, wenn sie ein Gespräch beginnen"
 
-#: src/routes/project/chat/ProjectChatRoute.tsx:322
+#: src/routes/project/chat/ProjectChatRoute.tsx:325
 #: src/components/view/CreateViewForm.tsx:83
 msgid "This will clear your current input. Are you sure?"
 msgstr "Dies wird Ihre aktuelle Eingabe löschen. Sind Sie sicher?"
@@ -2783,7 +2783,7 @@ msgstr "Erneut versuchen"
 msgid "Try moving a bit closer to your microphone for better sound quality."
 msgstr "Versuchen Sie, etwas näher an Ihren Mikrofon zu sein, um bessere Audio-Qualität zu erhalten."
 
-#: src/routes/project/chat/ProjectChatRoute.tsx:529
+#: src/routes/project/chat/ProjectChatRoute.tsx:540
 msgid "Type a message..."
 msgstr "Nachricht eingeben..."
 
@@ -2873,7 +2873,7 @@ msgstr "Dateien hochladen"
 msgid "Uploading Audio Files..."
 msgstr "Audio-Dateien werden hochgeladen..."
 
-#: src/routes/project/chat/ProjectChatRoute.tsx:567
+#: src/routes/project/chat/ProjectChatRoute.tsx:578
 msgid "Use Shift + Enter to add a new line"
 msgstr "Verwenden Sie Shift + Enter, um eine neue Zeile hinzuzufügen"
 
@@ -2942,7 +2942,7 @@ msgstr "Wir hören einige Stille. Versuchen Sie, lauter zu sprechen, damit Ihre
 msgid "Welcome"
 msgstr "Willkommen"
 
-#: src/routes/project/chat/ProjectChatRoute.tsx:363
+#: src/routes/project/chat/ProjectChatRoute.tsx:374
 msgid "Welcome to Dembrane Chat! Use the sidebar to select resources and conversations that you want to analyse. Then, you can ask questions about the selected resources and conversations."
 msgstr "Willkommen beim Dembrane Chat! Verwenden Sie die Seitenleiste, um Ressourcen und Gespräche auszuwählen, die Sie analysieren möchten. Dann können Sie Fragen zu den ausgewählten Ressourcen und Gesprächen stellen."