@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/tool-call-visualization/renderers/news-api/NewsOverlay.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useState, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
 import { Newspaper, Calendar, ExternalLink, Filter, SortAsc, AlertCircle, User } from "lucide-react";
 import { Button } from "@ai-matrx/design-system";
 import { Badge } from "@ai-matrx/design-system";
@@ -43,95 +44,162 @@ const NewsOverlay = ({ entry }) => {
     return articles;
   }, [allArticles, selectedSource, sortBy]);
   if (isError) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center py-16 gap-3 text-destructive" }, /* @__PURE__ */ React.createElement(AlertCircle, { className: "w-10 h-10 opacity-60" }), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "Failed to fetch news articles."), /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, null));
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 gap-3 text-destructive", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "w-10 h-10 opacity-60" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Failed to fetch news articles." }),
+      /* @__PURE__ */ jsx(ErrorAlchemyMenu, {})
+    ] });
   }
   if (allArticles.length === 0) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center py-16 gap-3 text-muted-foreground" }, /* @__PURE__ */ React.createElement(Newspaper, { className: "w-10 h-10 opacity-40" }), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "No news data available", query ? ` for "${query}"` : "", "."));
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 gap-3 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Newspaper, { className: "w-10 h-10 opacity-40" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
+        "No news data available",
+        query ? ` for "${query}"` : "",
+        "."
+      ] })
+    ] });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "w-full h-full overflow-y-auto bg-background p-4 space-y-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-2 bg-card rounded-lg p-3 border border-border" }, /* @__PURE__ */ React.createElement(Filter, { className: "w-4 h-4 text-muted-foreground flex-shrink-0" }), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: selectedSource === "all" ? "default" : "outline",
-      size: "sm",
-      onClick: () => setSelectedSource("all")
-    },
-    "All (",
-    allArticles.length,
-    ")"
-  ), sources.map((source) => {
-    const count = allArticles.filter((a) => a.source.name === source).length;
-    return /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        key: source,
-        variant: selectedSource === source ? "default" : "outline",
-        size: "sm",
-        onClick: () => setSelectedSource(source)
-      },
-      source,
-      " (",
-      count,
-      ")"
-    );
-  }), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 ml-auto" }, /* @__PURE__ */ React.createElement(SortAsc, { className: "w-4 h-4 text-muted-foreground flex-shrink-0" }), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: sortBy === "newest" ? "default" : "outline",
-      size: "sm",
-      onClick: () => setSortBy("newest")
-    },
-    "Newest"
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: sortBy === "oldest" ? "default" : "outline",
-      size: "sm",
-      onClick: () => setSortBy("oldest")
-    },
-    "Oldest"
-  ))), query && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground px-1" }, totalResults, " result", totalResults !== 1 ? "s" : "", " for ", /* @__PURE__ */ React.createElement("em", null, "\u201C", query, "\u201D")), /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, filteredArticles.map((article, index) => /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      key: index,
-      className: "bg-card rounded-lg border border-border overflow-hidden hover:border-primary/30 hover:shadow-md transition-all duration-200"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row gap-0 md:gap-4" }, article.url_to_image && /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-56 flex-shrink-0" }, /* @__PURE__ */ React.createElement(
-      "img",
-      {
-        src: article.url_to_image,
-        alt: article.title,
-        className: "w-full h-48 md:h-full object-cover md:rounded-l-lg",
-        onError: (e) => {
-          e.currentTarget.parentElement.style.display = "none";
+  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full overflow-y-auto bg-background p-4 space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 bg-card rounded-lg p-3 border border-border", children: [
+      /* @__PURE__ */ jsx(Filter, { className: "w-4 h-4 text-muted-foreground flex-shrink-0" }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: selectedSource === "all" ? "default" : "outline",
+          size: "sm",
+          onClick: () => setSelectedSource("all"),
+          children: [
+            "All (",
+            allArticles.length,
+            ")"
+          ]
         }
-      }
-    )), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0 p-4 space-y-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-2 flex-wrap" }, /* @__PURE__ */ React.createElement(Badge, { variant: "secondary", className: "text-xs" }, article.source.name), article.published_at && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-xs text-muted-foreground" }, /* @__PURE__ */ React.createElement(Calendar, { className: "w-3 h-3" }), /* @__PURE__ */ React.createElement("span", null, new Date(article.published_at).toLocaleDateString("en-US", {
-      month: "long",
-      day: "numeric",
-      year: "numeric",
-      hour: "2-digit",
-      minute: "2-digit"
-    })))), /* @__PURE__ */ React.createElement(
-      "a",
-      {
-        href: article.url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "group block"
-      },
-      /* @__PURE__ */ React.createElement("h2", { className: "text-base font-semibold text-foreground group-hover:text-primary transition-colors flex items-start gap-2" }, /* @__PURE__ */ React.createElement("span", null, article.title), /* @__PURE__ */ React.createElement(ExternalLink, { className: "w-4 h-4 flex-shrink-0 mt-0.5 opacity-0 group-hover:opacity-100 transition-opacity" }))
-    ), article.author && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-xs text-muted-foreground" }, /* @__PURE__ */ React.createElement(User, { className: "w-3 h-3" }), /* @__PURE__ */ React.createElement("span", null, article.author)), article.description && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-foreground/80" }, article.description), article.content && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-muted-foreground line-clamp-3" }, article.content), /* @__PURE__ */ React.createElement(
-      "a",
+      ),
+      sources.map((source) => {
+        const count = allArticles.filter((a) => a.source.name === source).length;
+        return /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: selectedSource === source ? "default" : "outline",
+            size: "sm",
+            onClick: () => setSelectedSource(source),
+            children: [
+              source,
+              " (",
+              count,
+              ")"
+            ]
+          },
+          source
+        );
+      }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 ml-auto", children: [
+        /* @__PURE__ */ jsx(SortAsc, { className: "w-4 h-4 text-muted-foreground flex-shrink-0" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: sortBy === "newest" ? "default" : "outline",
+            size: "sm",
+            onClick: () => setSortBy("newest"),
+            children: "Newest"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: sortBy === "oldest" ? "default" : "outline",
+            size: "sm",
+            onClick: () => setSortBy("oldest"),
+            children: "Oldest"
+          }
+        )
+      ] })
+    ] }),
+    query && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground px-1", children: [
+      totalResults,
+      " result",
+      totalResults !== 1 ? "s" : "",
+      " for ",
+      /* @__PURE__ */ jsxs("em", { children: [
+        "\u201C",
+        query,
+        "\u201D"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: filteredArticles.map((article, index) => /* @__PURE__ */ jsx(
+      "div",
       {
-        href: article.url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "inline-flex items-center gap-1 text-sm font-medium text-primary hover:text-primary/80 transition-colors"
+        className: "bg-card rounded-lg border border-border overflow-hidden hover:border-primary/30 hover:shadow-md transition-all duration-200",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row gap-0 md:gap-4", children: [
+          article.url_to_image && /* @__PURE__ */ jsx("div", { className: "w-full md:w-56 flex-shrink-0", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: article.url_to_image,
+              alt: article.title,
+              className: "w-full h-48 md:h-full object-cover md:rounded-l-lg",
+              onError: (e) => {
+                e.currentTarget.parentElement.style.display = "none";
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 p-4 space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
+              /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: article.source.name }),
+              article.published_at && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ jsx(Calendar, { className: "w-3 h-3" }),
+                /* @__PURE__ */ jsx("span", { children: new Date(article.published_at).toLocaleDateString("en-US", {
+                  month: "long",
+                  day: "numeric",
+                  year: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit"
+                }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: article.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "group block",
+                children: /* @__PURE__ */ jsxs("h2", { className: "text-base font-semibold text-foreground group-hover:text-primary transition-colors flex items-start gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { children: article.title }),
+                  /* @__PURE__ */ jsx(ExternalLink, { className: "w-4 h-4 flex-shrink-0 mt-0.5 opacity-0 group-hover:opacity-100 transition-opacity" })
+                ] })
+              }
+            ),
+            article.author && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(User, { className: "w-3 h-3" }),
+              /* @__PURE__ */ jsx("span", { children: article.author })
+            ] }),
+            article.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/80", children: article.description }),
+            article.content && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground line-clamp-3", children: article.content }),
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: article.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "inline-flex items-center gap-1 text-sm font-medium text-primary hover:text-primary/80 transition-colors",
+                children: [
+                  "Read full article",
+                  /* @__PURE__ */ jsx(ExternalLink, { className: "w-3 h-3" })
+                ]
+              }
+            )
+          ] })
+        ] })
       },
-      "Read full article",
-      /* @__PURE__ */ React.createElement(ExternalLink, { className: "w-3 h-3" })
-    )))
-  ))), filteredArticles.length === 0 && allArticles.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center py-12 gap-3 text-muted-foreground" }, /* @__PURE__ */ React.createElement(Newspaper, { className: "w-10 h-10 opacity-40" }), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "No articles match the selected source filter."), /* @__PURE__ */ React.createElement(Button, { variant: "outline", size: "sm", onClick: () => setSelectedSource("all") }, "Clear filter")));
+      index
+    )) }),
+    filteredArticles.length === 0 && allArticles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 gap-3 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Newspaper, { className: "w-10 h-10 opacity-40" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No articles match the selected source filter." }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setSelectedSource("all"), children: "Clear filter" })
+    ] })
+  ] });
 };
 export {
   NewsOverlay