feat: show alert detail in the conversation page (#277)

* fix: show alert details on conversation page

* feat: add utm_source to insight link

Author: peppescg

src/components/AlertDetail.tsx

@@ -0,0 +1,55 @@
+import { AlertConversation } from "@/api/generated";
+import { isAlertMalicious } from "@/features/alerts/lib/is-alert-malicious";
+import { isAlertSecret } from "@/features/alerts/lib/is-alert-secret";
+import { Markdown } from "./Markdown";
+
+type MaliciousPkgType = {
+  name: string;
+  type: string;
+  status: string;
+  description: string;
+};
+
+export function AlertDetail({ alert }: { alert: AlertConversation }) {
+  if (alert.trigger_string === null) return "N/A";
+  if (isAlertSecret(alert) && typeof alert.trigger_string === "string") {
+    return (
+      <div className="bg-gray-25 rounded-lg overflow-auto p-4">
+        <Markdown>{alert.trigger_string}</Markdown>
+      </div>
+    );
+  }
+
+  if (isAlertMalicious(alert) && typeof alert.trigger_string === "object") {
+    const maliciousPkg = alert.trigger_string as MaliciousPkgType;
+
+    return (
+      <div className="max-h-40 w-fit overflow-y-auto whitespace-pre-wrap p-2">
+        <label className="font-medium">Package:</label>
+        &nbsp;
+        <a
+          href={`https://www.insight.stacklok.com/report/${maliciousPkg.type}/${maliciousPkg.name}?utm_source=codegate-ui`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-brand-500 hover:underline"
+        >
+          {maliciousPkg.type}/{maliciousPkg.name}
+        </a>
+        {maliciousPkg.status && (
+          <>
+            <br />
+            <label className="font-medium">Status:</label> {maliciousPkg.status}
+          </>
+        )}
+        {maliciousPkg.description && (
+          <>
+            <br />
+            <label className="font-medium">Description:</label>{" "}
+            {maliciousPkg.description}
+          </>
+        )}
+      </div>
+    );
+  }
+  return null;
+}

src/routes/route-chat.tsx

@@ -8,11 +8,14 @@ import {
   ChatBubbleMessage,
 } from "@/components/ui/chat/chat-bubble";
 import { Markdown } from "@/components/Markdown";
-import { Breadcrumb, Breadcrumbs } from "@stacklok/ui-kit";
+import { Breadcrumb, Breadcrumbs, Card, CardBody } from "@stacklok/ui-kit";
 import { BreadcrumbHome } from "@/components/BreadcrumbHome";
+import { useQueryGetWorkspaceAlertTable } from "@/features/alerts/hooks/use-query-get-workspace-alerts-table";
+import { AlertDetail } from "@/components/AlertDetail";
 
 export function RouteChat() {
   const { id } = useParams();
+  const { data = [] } = useQueryGetWorkspaceAlertTable();
   const { data: prompts } = useQueryGetWorkspaceMessages();
   const chat = prompts?.find((prompt) => prompt.chat_id === id);
 
@@ -28,6 +31,13 @@ export function RouteChat() {
           chat.conversation_timestamp,
         );
 
+  // we have an issue on BE, we received duplicated alerts
+  const alertDetail = data.filter((alert) =>
+    alert.conversation.question_answers.some(
+      (item) => item.question.message_id === id,
+    ),
+  )[0];
+
   return (
     <>
       <Breadcrumbs>
@@ -36,6 +46,14 @@ export function RouteChat() {
       </Breadcrumbs>
 
       <div className="w-[calc(100vw-18rem)]">
+        {alertDetail && (
+          <Card className="w-full mb-2">
+            <CardBody className="w-full h-fit overflow-auto max-h-[500px]">
+              <AlertDetail alert={alertDetail} />
+            </CardBody>
+          </Card>
+        )}
+
         <ChatMessageList>
           {(chat?.question_answers ?? []).map(({ question, answer }, index) => (
             <div key={index} className="flex flex-col size-full gap-6">