From 8154d3e9c8082f6aac0fc2914621dd99f8f71936 Mon Sep 17 00:00:00 2001
From: Giuseppe Scuglia <peppescg@gmail.com>
Date: Fri, 7 Feb 2025 16:14:23 +0100
Subject: [PATCH 1/2] feat: show alert detail in the conversation page (#277)

* fix: show alert details on conversation page

* feat: add utm_source to insight link
---
 src/components/AlertDetail.tsx | 55 ++++++++++++++++++++++++++++++++++
 src/routes/route-chat.tsx      | 20 ++++++++++++-
 2 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AlertDetail.tsx

diff --git a/src/components/AlertDetail.tsx b/src/components/AlertDetail.tsx
new file mode 100644
index 00000000..10de3054
--- /dev/null
+++ b/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;
+}
diff --git a/src/routes/route-chat.tsx b/src/routes/route-chat.tsx
index 30f1b5f3..6cda4069 100644
--- a/src/routes/route-chat.tsx
+++ b/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">

From 4499309b989545e15b3e954584a238bbc8f08f19 Mon Sep 17 00:00:00 2001
From: Stacklok Bot <140063061+stacklokbot@users.noreply.github.com>
Date: Fri, 7 Feb 2025 17:16:51 +0200
Subject: [PATCH 2/2] chore(main): release 0.14.0 (#280)

---
 CHANGELOG.md      | 7 +++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6b608e88..0744f896 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.14.0](https://github.com/stacklok/codegate-ui/compare/v0.13.1...v0.14.0) (2025-02-07)
+
+
+### Features
+
+* show alert detail in the conversation page ([#277](https://github.com/stacklok/codegate-ui/issues/277)) ([8154d3e](https://github.com/stacklok/codegate-ui/commit/8154d3e9c8082f6aac0fc2914621dd99f8f71936))
+
 ## [0.13.1](https://github.com/stacklok/codegate-ui/compare/v0.13.0...v0.13.1) (2025-02-07)
 
 
diff --git a/package-lock.json b/package-lock.json
index 4ddf4a85..5260ba41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vite-project",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vite-project",
-      "version": "0.13.1",
+      "version": "0.14.0",
       "dependencies": {
         "@hey-api/client-fetch": "^0.7.1",
         "@monaco-editor/react": "^4.6.0",
diff --git a/package.json b/package.json
index 7aa7d0ae..22be71a1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vite-project",
   "private": true,
-  "version": "0.13.1",
+  "version": "0.14.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://github.com/stacklok/codegate-ui/compare/v0.13.1...v0.14.0.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://github.com/stacklok/codegate-ui/compare/v0.13.1...v0.14.0.patch" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://github.com/stacklok/codegate-ui/compare/v0.13.1...v0.14.0.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://github.com/stacklok/codegate-ui/compare/v0.13.1...v0.14.0.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>