Feat/improvements

.github/workflows/cd.yaml

@@ -109,7 +109,7 @@ jobs:
 
       - name: Update deployment image tag
         run: |
-          DEPLOYMENT_FILE="flux-repo/dev/bricks/composable-ui/deployment.yaml"
+          DEPLOYMENT_FILE="flux-repo/dev/composables/composable-ui/deployment.yaml"
           if [ -f "$DEPLOYMENT_FILE" ]; then
             sed -i 's|image: kaiohz/pickpro:composable-ui-.*|image: kaiohz/pickpro:composable-ui-${{ steps.sha.outputs.result }}|g' "$DEPLOYMENT_FILE"
           else
@@ -122,6 +122,6 @@ jobs:
           cd flux-repo
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
-          git add dev/bricks/composable-ui/deployment.yaml
+          git add dev/composables/composable-ui/deployment.yaml
           git commit -m "Update composable-ui image to ${{ steps.sha.outputs.result }}" || echo "No changes to commit"
           git push https://x-access-token:${{ secrets.FLUX_REPO_TOKEN }}@github.com/SoluDevTech/flux.git main

src/application/components/agent/AgentConfigViewer.tsx

@@ -50,7 +50,7 @@ export default function AgentConfigViewer({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-sm"
+      className="fixed inset-0 z-50 overflow-y-auto flex items-start justify-center pt-[10vh] bg-black/30 backdrop-blur-sm"
       onClick={handleBackdropClick}
       onKeyDown={(e) => {
         if (e.key === "Escape") onOpenChange(false);
@@ -59,13 +59,12 @@ export default function AgentConfigViewer({
       aria-modal="true"
       aria-labelledby="agent-viewer-title"
     >
-      <dialog
-        open
-        role="none"
-        className="m-0 p-0 w-full max-w-2xl max-h-[80vh] border-none bg-transparent"
+      <div
+        role="document"
+        className="w-full max-w-2xl my-8"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="bg-surface-container-lowest rounded-2xl p-8 w-full overflow-y-auto ambient-shadow">
+        <div className="bg-surface-container-lowest rounded-2xl p-8 w-full max-h-[80vh] overflow-y-auto ambient-shadow">
           {/* Header */}
           <div className="flex items-center justify-between mb-8">
             <h2
@@ -263,7 +262,7 @@ export default function AgentConfigViewer({
             </button>
           </div>
         </div>
-      </dialog>
+      </div>
     </div>
   );
 }

src/application/components/agent/CreateAgentDialog.tsx

@@ -54,7 +54,7 @@ export default function CreateAgentDialog({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-sm"
+      className="fixed inset-0 z-50 overflow-y-auto flex items-start justify-center pt-[10vh] bg-black/30 backdrop-blur-sm"
       onClick={handleBackdropClick}
       onKeyDown={(e) => {
         if (e.key === "Escape") onOpenChange(false);
@@ -63,10 +63,9 @@ export default function CreateAgentDialog({
       aria-modal="true"
       aria-labelledby="create-agent-title"
     >
-      <dialog
-        open
-        role="none"
-        className="m-0 p-0 w-full max-w-md border-none bg-transparent"
+      <div
+        role="document"
+        className="w-full max-w-md my-8"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="bg-surface-container-lowest rounded-2xl p-8 w-full ambient-shadow">
@@ -142,7 +141,7 @@ export default function CreateAgentDialog({
             </div>
           </form>
         </div>
-      </dialog>
+      </div>
     </div>
   );
 }

src/application/components/chat/ChatInput.tsx

@@ -1,5 +1,6 @@
 import { useState, type KeyboardEvent } from "react";
 import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
 import { cn } from "@/application/lib/utils";
 import { useStreamChat } from "@/application/hooks/chat/useStreamChat";
 import { useSendMessage } from "@/application/hooks/chat/useSendMessage";
@@ -31,16 +32,17 @@ export default function ChatInput({ threadId }: Readonly<ChatInputProps>) {
       sendMessage.mutate(
         { message: trimmed },
         {
-          onSuccess: () => {
-            useChatStore.getState().setPendingUserMessage(null);
-            useChatStore.getState().setStreaming(false);
-            queryClient.invalidateQueries({
+          onSuccess: async () => {
+            await queryClient.invalidateQueries({
               queryKey: ["messages", threadId],
             });
+            useChatStore.getState().setPendingUserMessage(null);
+            useChatStore.getState().setStreaming(false);
           },
           onError: () => {
             useChatStore.getState().setPendingUserMessage(null);
             useChatStore.getState().setStreaming(false);
+            toast.error("Failed to send message");
           },
         },
       );

src/application/components/layout/ThreadSidebar.tsx

@@ -132,7 +132,7 @@ export default function ThreadSidebar({
       {/* Agent selection dialog */}
       {showAgentDialog && (
         <div
-          className="fixed inset-0 z-50 bg-black/30 flex items-center justify-center"
+          className="fixed inset-0 z-50 bg-black/30 overflow-y-auto flex items-start justify-center pt-[10vh]"
           onClick={() => setShowAgentDialog(false)}
           onKeyDown={(e) => {
             if (e.key === "Escape") setShowAgentDialog(false);
@@ -141,16 +141,12 @@ export default function ThreadSidebar({
           aria-modal="true"
           aria-labelledby="agent-dialog-title"
         >
-          <dialog
-            open
-            role="none"
-            className="m-0 p-0 w-80 max-h-96 border-none bg-transparent"
+          <div
+            role="document"
+            className="w-80 max-h-[80vh] my-8"
             onClick={(e) => e.stopPropagation()}
           >
-            <div
-              className="bg-white rounded-xl p-6 w-full overflow-y-auto shadow-xl"
-              role="document"
-            >
+            <div className="bg-white rounded-xl p-6 w-full overflow-y-auto shadow-xl">
               <h3
                 id="agent-dialog-title"
                 className="font-headline text-lg font-bold mb-4"
@@ -182,7 +178,7 @@ export default function ThreadSidebar({
                 </div>
               )}
             </div>
-          </dialog>
+          </div>
         </div>
       )}
     </aside>

src/application/hooks/chat/useStreamChat.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
 import { chatApi } from "@/infrastructure/api/chat/chatApi";
 import { useChatStore } from "@/application/stores/useChatStore";
 import type { ChatRequest } from "@/domain/entities/chat/chatRequest";
@@ -23,15 +24,23 @@ export function useStreamChat(threadId: string | null) {
         (chunk) => {
           appendStreamChunk(chunk);
         },
-        () => {
-          useChatStore.getState().setPendingUserMessage(null);
-          setStreaming(false);
-          queryClient.invalidateQueries({ queryKey: ["messages", threadId] });
+        async () => {
+          try {
+            await queryClient.invalidateQueries({
+              queryKey: ["messages", threadId],
+            });
+          } finally {
+            useChatStore.getState().setPendingUserMessage(null);
+            setStreaming(false);
+          }
         },
         (error) => {
           console.error("Stream error:", error);
           useChatStore.getState().setPendingUserMessage(null);
           setStreaming(false);
+          toast.error("Stream error", {
+            description: error.message || "An error occurred while streaming.",
+          });
         },
       );
     },

src/infrastructure/api/chat/chatApi.ts

@@ -39,6 +39,7 @@ export const chatApi: IChatPort = {
     const response = await apiClient.post<Message>(
       `/api/v1/chat/${threadId}`,
       request,
+      { timeout: 300000 },
     );
     return response.data;
   },