Display readable error message in chat failure (#621)

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx

@@ -39,12 +39,15 @@ const HistoricalMessage = forwardRef(
             />
 
             {error ? (
-              <span
-                className={`inline-block p-2 rounded-lg bg-red-50 text-red-500`}
-              >
-                <Warning className="h-4 w-4 mb-1 inline-block" /> Could not
-                respond to message.
-              </span>
+              <div className="p-2 rounded-lg bg-red-50 text-red-500">
+                <span className={`inline-block `}>
+                  <Warning className="h-4 w-4 mb-1 inline-block" /> Could not
+                  respond to message.
+                </span>
+                <p className="text-xs font-mono mt-2 border-l-2 border-red-300 pl-2 bg-red-200 p-2 rounded-sm">
+                  {error}
+                </p>
+              </div>
             ) : (
               <span
                 className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
@@ -54,7 +57,7 @@ const HistoricalMessage = forwardRef(
               />
             )}
           </div>
-          {role === "assistant" && (
+          {role === "assistant" && !error && (
             <div className="flex gap-x-5">
               <div className="relative w-[35px] h-[35px] rounded-full flex-shrink-0 overflow-hidden" />
               <Actions message={DOMPurify.sanitize(message)} />