@backstage-community/plugin-mcp-chat 0.0.0

package/dist/components/ChatContainer/QuickStart.esm.js

@@ -0,0 +1,271 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useTheme } from '@mui/material/styles';
+import BugReportIcon from '@mui/icons-material/BugReport';
+import BuildIcon from '@mui/icons-material/Build';
+import CloudIcon from '@mui/icons-material/Cloud';
+import CodeIcon from '@mui/icons-material/Code';
+import DataUsageIcon from '@mui/icons-material/DataUsage';
+import DeveloperModeIcon from '@mui/icons-material/DeveloperMode';
+import SearchIcon from '@mui/icons-material/Search';
+import SecurityIcon from '@mui/icons-material/Security';
+import SettingsIcon from '@mui/icons-material/Settings';
+import DatabaseIcon from '@mui/icons-material/Storage';
+import TrendingUpIcon from '@mui/icons-material/TrendingUp';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Chip from '@mui/material/Chip';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
+import SpeedIcon from '@mui/icons-material/Speed';
+import ExtensionIcon from '@mui/icons-material/Extension';
+import WebIcon from '@mui/icons-material/Web';
+import DevicesIcon from '@mui/icons-material/Devices';
+import ComputerIcon from '@mui/icons-material/Computer';
+
+const availableIcons = [
+  /* @__PURE__ */ jsx(SearchIcon, {}),
+  /* @__PURE__ */ jsx(CodeIcon, {}),
+  /* @__PURE__ */ jsx(DatabaseIcon, {}),
+  /* @__PURE__ */ jsx(BuildIcon, {}),
+  /* @__PURE__ */ jsx(SecurityIcon, {}),
+  /* @__PURE__ */ jsx(DataUsageIcon, {}),
+  /* @__PURE__ */ jsx(CloudIcon, {}),
+  /* @__PURE__ */ jsx(DeveloperModeIcon, {}),
+  /* @__PURE__ */ jsx(SettingsIcon, {}),
+  /* @__PURE__ */ jsx(TrendingUpIcon, {}),
+  /* @__PURE__ */ jsx(BugReportIcon, {}),
+  /* @__PURE__ */ jsx(SpeedIcon, {}),
+  /* @__PURE__ */ jsx(ExtensionIcon, {}),
+  /* @__PURE__ */ jsx(WebIcon, {}),
+  /* @__PURE__ */ jsx(DevicesIcon, {}),
+  /* @__PURE__ */ jsx(ComputerIcon, {})
+];
+const getRandomIcon = (index) => {
+  const iconIndex = index % availableIcons.length;
+  return availableIcons[iconIndex];
+};
+const QuickStart = ({
+  onSuggestionClick
+}) => {
+  const theme = useTheme();
+  const configApi = useApi(configApiRef);
+  const suggestions = useMemo(() => {
+    try {
+      const configSuggestions = configApi.getOptionalConfigArray(
+        "mcpChat.quickPrompts"
+      );
+      if (!configSuggestions || configSuggestions.length === 0) {
+        return [];
+      }
+      return configSuggestions.map((config) => ({
+        title: config.getString("title"),
+        description: config.getString("description"),
+        prompt: config.getString("prompt"),
+        category: config.getString("category")
+      }));
+    } catch (error) {
+      return [];
+    }
+  }, [configApi]);
+  const getGridSize = () => {
+    const count = suggestions.length;
+    if (count <= 2) return { xs: 12, sm: 6, md: 6 };
+    if (count <= 4) return { xs: 12, sm: 6, md: 6 };
+    if (count <= 6) return { xs: 12, sm: 6, md: 4 };
+    return { xs: 12, sm: 6, md: 4 };
+  };
+  const gridSize = getGridSize();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        padding: theme.spacing(3, 3),
+        textAlign: "center",
+        maxWidth: 900,
+        margin: "auto auto 0 auto",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        minHeight: "calc(100vh - 120px)",
+        // Account for top bar and input area
+        paddingBottom: theme.spacing(15),
+        // Ensure no overlap with input area
+        overflowY: "auto"
+        // Allow scrolling if needed
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "h3",
+            sx: {
+              fontWeight: 700,
+              marginBottom: theme.spacing(2),
+              color: theme.palette.text.primary,
+              background: theme.palette.mode === "dark" ? `linear-gradient(45deg, ${theme.palette.primary.light}, ${theme.palette.primary.main}, ${theme.palette.secondary.main})` : `linear-gradient(45deg, ${theme.palette.primary.dark}, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              backgroundClip: "text"
+            },
+            children: "How can I help you today?"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body1",
+            sx: {
+              color: theme.palette.text.secondary,
+              fontSize: "1.1rem",
+              lineHeight: 1.6,
+              maxWidth: 600,
+              marginBottom: theme.spacing(4),
+              marginLeft: "auto",
+              marginRight: "auto"
+            },
+            children: "Explore powerful AI-assisted workflows with our comprehensive MCP tool integration. Choose a category below to get started with intelligent automation."
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Grid,
+          {
+            container: true,
+            spacing: 3,
+            sx: {
+              marginTop: theme.spacing(3),
+              marginBottom: theme.spacing(4)
+            },
+            justifyContent: "center",
+            children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+              Grid,
+              {
+                item: true,
+                xs: gridSize.xs,
+                sm: gridSize.sm,
+                md: gridSize.md,
+                children: /* @__PURE__ */ jsx(
+                  Card,
+                  {
+                    onClick: () => onSuggestionClick(suggestion.prompt),
+                    elevation: 0,
+                    sx: {
+                      cursor: "pointer",
+                      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                      border: `1px solid ${theme.palette.divider}`,
+                      borderRadius: theme.spacing(2),
+                      height: "160px",
+                      position: "relative",
+                      overflow: "hidden",
+                      background: theme.palette.background.paper,
+                      backdropFilter: "blur(10px)",
+                      "&:hover": {
+                        transform: "translateY(-4px) scale(1.01)",
+                        boxShadow: theme.shadows[8],
+                        borderColor: theme.palette.primary.main,
+                        "& .suggestion-icon": {
+                          transform: "scale(1.1)"
+                        },
+                        "&::before": {
+                          opacity: 1
+                        }
+                      },
+                      "&::before": {
+                        content: '""',
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        height: 3,
+                        background: theme.palette.mode === "dark" ? `linear-gradient(45deg, ${theme.palette.primary.light}, ${theme.palette.primary.main}, ${theme.palette.secondary.main})` : `linear-gradient(45deg, ${theme.palette.primary.dark}, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+                        opacity: 0,
+                        transition: "opacity 0.3s ease"
+                      }
+                    },
+                    children: /* @__PURE__ */ jsxs(
+                      CardContent,
+                      {
+                        sx: {
+                          padding: theme.spacing(2),
+                          height: "100%",
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          position: "relative"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Chip,
+                            {
+                              label: suggestion.category,
+                              size: "small",
+                              sx: {
+                                position: "absolute",
+                                top: theme.spacing(1),
+                                right: theme.spacing(1),
+                                fontSize: "0.7rem",
+                                height: 20,
+                                background: theme.palette.action.hover,
+                                color: theme.palette.primary.main,
+                                border: `1px solid ${theme.palette.divider}`
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Box,
+                            {
+                              className: "suggestion-icon",
+                              sx: {
+                                fontSize: "2rem",
+                                marginBottom: theme.spacing(1),
+                                transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                                color: theme.palette.primary.main
+                              },
+                              children: getRandomIcon(index)
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              variant: "h6",
+                              sx: {
+                                fontWeight: 600,
+                                marginBottom: theme.spacing(0.5),
+                                color: theme.palette.text.primary,
+                                fontSize: "1rem"
+                              },
+                              children: suggestion.title
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              variant: "body2",
+                              sx: {
+                                color: theme.palette.text.secondary,
+                                fontSize: "0.85rem",
+                                lineHeight: 1.4
+                              },
+                              children: suggestion.description
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                )
+              },
+              index
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { QuickStart };
+//# sourceMappingURL=QuickStart.esm.js.map

package/dist/components/ChatContainer/QuickStart.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickStart.esm.js","sources":["../../../src/components/ChatContainer/QuickStart.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useMemo } from 'react';\nimport { useTheme } from '@mui/material/styles';\nimport BugReportIcon from '@mui/icons-material/BugReport';\nimport BuildIcon from '@mui/icons-material/Build';\nimport CloudIcon from '@mui/icons-material/Cloud';\nimport CodeIcon from '@mui/icons-material/Code';\nimport DataUsageIcon from '@mui/icons-material/DataUsage';\nimport DeveloperModeIcon from '@mui/icons-material/DeveloperMode';\nimport SearchIcon from '@mui/icons-material/Search';\nimport SecurityIcon from '@mui/icons-material/Security';\nimport SettingsIcon from '@mui/icons-material/Settings';\nimport DatabaseIcon from '@mui/icons-material/Storage';\nimport TrendingUpIcon from '@mui/icons-material/TrendingUp';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport Chip from '@mui/material/Chip';\nimport Grid from '@mui/material/Grid';\nimport Typography from '@mui/material/Typography';\n\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport SpeedIcon from '@mui/icons-material/Speed';\nimport ExtensionIcon from '@mui/icons-material/Extension';\nimport WebIcon from '@mui/icons-material/Web';\nimport DevicesIcon from '@mui/icons-material/Devices';\nimport ComputerIcon from '@mui/icons-material/Computer';\n\ninterface QuickStartProps {\n  onSuggestionClick: (suggestion: string) => void;\n}\n\ninterface Suggestion {\n  title: string;\n  description: string;\n  prompt: string;\n  category: string;\n}\n\n// Available icons for random selection\nconst availableIcons = [\n  <SearchIcon />,\n  <CodeIcon />,\n  <DatabaseIcon />,\n  <BuildIcon />,\n  <SecurityIcon />,\n  <DataUsageIcon />,\n  <CloudIcon />,\n  <DeveloperModeIcon />,\n  <SettingsIcon />,\n  <TrendingUpIcon />,\n  <BugReportIcon />,\n  <SpeedIcon />,\n  <ExtensionIcon />,\n  <WebIcon />,\n  <DevicesIcon />,\n  <ComputerIcon />,\n];\n\n// Function to get a random icon\nconst getRandomIcon = (index: number): React.ReactElement => {\n  // Use index as seed for consistent icon selection per suggestion\n  const iconIndex = index % availableIcons.length;\n  return availableIcons[iconIndex];\n};\n\nexport const QuickStart: React.FC<QuickStartProps> = ({\n  onSuggestionClick,\n}) => {\n  const theme = useTheme();\n  const configApi = useApi(configApiRef);\n\n  // Get suggestions from config\n  const suggestions: Suggestion[] = useMemo(() => {\n    try {\n      const configSuggestions = configApi.getOptionalConfigArray(\n        'mcpChat.quickPrompts',\n      );\n\n      if (!configSuggestions || configSuggestions.length === 0) {\n        return [];\n      }\n\n      return configSuggestions.map(config => ({\n        title: config.getString('title'),\n        description: config.getString('description'),\n        prompt: config.getString('prompt'),\n        category: config.getString('category'),\n      }));\n    } catch (error) {\n      // Handle config errors gracefully by returning empty suggestions\n      return [];\n    }\n  }, [configApi]);\n\n  // Determine optimal grid layout based on number of suggestions\n  const getGridSize = () => {\n    const count = suggestions.length;\n    if (count <= 2) return { xs: 12 as const, sm: 6 as const, md: 6 as const }; // 1 row on desktop\n    if (count <= 4) return { xs: 12 as const, sm: 6 as const, md: 6 as const }; // 2x2 grid\n    if (count <= 6) return { xs: 12 as const, sm: 6 as const, md: 4 as const }; // 2x3 grid\n    return { xs: 12 as const, sm: 6 as const, md: 4 as const }; // 3 columns for larger counts\n  };\n\n  const gridSize = getGridSize();\n\n  return (\n    <Box\n      sx={{\n        padding: theme.spacing(3, 3),\n        textAlign: 'center',\n        maxWidth: 900,\n        margin: 'auto auto 0 auto',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        minHeight: 'calc(100vh - 120px)', // Account for top bar and input area\n        paddingBottom: theme.spacing(15), // Ensure no overlap with input area\n        overflowY: 'auto', // Allow scrolling if needed\n      }}\n    >\n      <Typography\n        variant=\"h3\"\n        sx={{\n          fontWeight: 700,\n          marginBottom: theme.spacing(2),\n          color: theme.palette.text.primary,\n          background:\n            theme.palette.mode === 'dark'\n              ? `linear-gradient(45deg, ${theme.palette.primary.light}, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`\n              : `linear-gradient(45deg, ${theme.palette.primary.dark}, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,\n          WebkitBackgroundClip: 'text',\n          WebkitTextFillColor: 'transparent',\n          backgroundClip: 'text',\n        }}\n      >\n        How can I help you today?\n      </Typography>\n      <Typography\n        variant=\"body1\"\n        sx={{\n          color: theme.palette.text.secondary,\n          fontSize: '1.1rem',\n          lineHeight: 1.6,\n          maxWidth: 600,\n          marginBottom: theme.spacing(4),\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        }}\n      >\n        Explore powerful AI-assisted workflows with our comprehensive MCP tool\n        integration. Choose a category below to get started with intelligent\n        automation.\n      </Typography>\n\n      <Grid\n        container\n        spacing={3}\n        sx={{\n          marginTop: theme.spacing(3),\n          marginBottom: theme.spacing(4),\n        }}\n        justifyContent=\"center\"\n      >\n        {suggestions.map((suggestion, index) => (\n          <Grid\n            item\n            xs={gridSize.xs}\n            sm={gridSize.sm}\n            md={gridSize.md}\n            key={index}\n          >\n            <Card\n              onClick={() => onSuggestionClick(suggestion.prompt)}\n              elevation={0}\n              sx={{\n                cursor: 'pointer',\n                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n                border: `1px solid ${theme.palette.divider}`,\n                borderRadius: theme.spacing(2),\n                height: '160px',\n                position: 'relative',\n                overflow: 'hidden',\n                background: theme.palette.background.paper,\n                backdropFilter: 'blur(10px)',\n                '&:hover': {\n                  transform: 'translateY(-4px) scale(1.01)',\n                  boxShadow: theme.shadows[8],\n                  borderColor: theme.palette.primary.main,\n                  '& .suggestion-icon': {\n                    transform: 'scale(1.1)',\n                  },\n                  '&::before': {\n                    opacity: 1,\n                  },\n                },\n                '&::before': {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: 0,\n                  right: 0,\n                  height: 3,\n                  background:\n                    theme.palette.mode === 'dark'\n                      ? `linear-gradient(45deg, ${theme.palette.primary.light}, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`\n                      : `linear-gradient(45deg, ${theme.palette.primary.dark}, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,\n                  opacity: 0,\n                  transition: 'opacity 0.3s ease',\n                },\n              }}\n            >\n              <CardContent\n                sx={{\n                  padding: theme.spacing(2),\n                  height: '100%',\n                  display: 'flex',\n                  flexDirection: 'column',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  position: 'relative',\n                }}\n              >\n                <Chip\n                  label={suggestion.category}\n                  size=\"small\"\n                  sx={{\n                    position: 'absolute',\n                    top: theme.spacing(1),\n                    right: theme.spacing(1),\n                    fontSize: '0.7rem',\n                    height: 20,\n                    background: theme.palette.action.hover,\n                    color: theme.palette.primary.main,\n                    border: `1px solid ${theme.palette.divider}`,\n                  }}\n                />\n                <Box\n                  className=\"suggestion-icon\"\n                  sx={{\n                    fontSize: '2rem',\n                    marginBottom: theme.spacing(1),\n                    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n                    color: theme.palette.primary.main,\n                  }}\n                >\n                  {getRandomIcon(index)}\n                </Box>\n                <Typography\n                  variant=\"h6\"\n                  sx={{\n                    fontWeight: 600,\n                    marginBottom: theme.spacing(0.5),\n                    color: theme.palette.text.primary,\n                    fontSize: '1rem',\n                  }}\n                >\n                  {suggestion.title}\n                </Typography>\n                <Typography\n                  variant=\"body2\"\n                  sx={{\n                    color: theme.palette.text.secondary,\n                    fontSize: '0.85rem',\n                    lineHeight: 1.4,\n                  }}\n                >\n                  {suggestion.description}\n                </Typography>\n              </CardContent>\n            </Card>\n          </Grid>\n        ))}\n      </Grid>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ChatContainer/TypingIndicator.esm.js

@@ -0,0 +1,154 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme } from '@mui/material/styles';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import { BotIcon } from '../BotIcon/BotIcon.esm.js';
+
+const TypingIndicator = () => {
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: theme.spacing(1),
+        marginBottom: theme.spacing(2)
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            sx: {
+              width: 35,
+              height: 35,
+              fontSize: "1rem",
+              backgroundColor: isDarkMode ? theme.palette.background.default : theme.palette.background.paper,
+              color: isDarkMode ? theme.palette.text.primary : theme.palette.text.secondary
+            },
+            children: /* @__PURE__ */ jsx(
+              BotIcon,
+              {
+                color: isDarkMode ? theme.palette.text.primary : theme.palette.text.secondary
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Card,
+          {
+            elevation: 0,
+            sx: {
+              backgroundColor: "transparent",
+              border: `0px solid ${theme.palette.background.paper}`,
+              maxWidth: "70%"
+            },
+            children: /* @__PURE__ */ jsx(
+              CardContent,
+              {
+                sx: {
+                  padding: `${theme.spacing(1.5)}px ${theme.spacing(2)}px !important`
+                },
+                children: /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      gap: theme.spacing(0.5),
+                      alignItems: "center"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          sx: {
+                            width: 8,
+                            height: 8,
+                            borderRadius: "50%",
+                            backgroundColor: theme.palette.text.secondary,
+                            animation: "typing 1.4s infinite",
+                            "@keyframes typing": {
+                              "0%, 60%, 100%": {
+                                transform: "translateY(0)",
+                                opacity: 0.5
+                              },
+                              "30%": {
+                                transform: "translateY(-10px)",
+                                opacity: 1
+                              }
+                            }
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          sx: {
+                            width: 8,
+                            height: 8,
+                            borderRadius: "50%",
+                            backgroundColor: theme.palette.text.secondary,
+                            animation: "typing 1.4s infinite",
+                            animationDelay: "0.2s",
+                            "@keyframes typing": {
+                              "0%, 60%, 100%": {
+                                transform: "translateY(0)",
+                                opacity: 0.5
+                              },
+                              "30%": {
+                                transform: "translateY(-10px)",
+                                opacity: 1
+                              }
+                            }
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          sx: {
+                            width: 8,
+                            height: 8,
+                            borderRadius: "50%",
+                            backgroundColor: theme.palette.text.secondary,
+                            animation: "typing 1.4s infinite",
+                            animationDelay: "0.4s",
+                            "@keyframes typing": {
+                              "0%, 60%, 100%": {
+                                transform: "translateY(0)",
+                                opacity: 0.5
+                              },
+                              "30%": {
+                                transform: "translateY(-10px)",
+                                opacity: 1
+                              }
+                            }
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "caption",
+                          sx: { marginLeft: 1, color: theme.palette.text.secondary },
+                          children: "Hang on..."
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { TypingIndicator };
+//# sourceMappingURL=TypingIndicator.esm.js.map

package/dist/components/ChatContainer/TypingIndicator.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicator.esm.js","sources":["../../../src/components/ChatContainer/TypingIndicator.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useTheme } from '@mui/material/styles';\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardContent from '@mui/material/CardContent';\nimport Typography from '@mui/material/Typography';\nimport { BotIcon } from '../BotIcon';\n\nexport const TypingIndicator: React.FC = () => {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        gap: theme.spacing(1),\n        marginBottom: theme.spacing(2),\n      }}\n    >\n      <Avatar\n        sx={{\n          width: 35,\n          height: 35,\n          fontSize: '1rem',\n          backgroundColor: isDarkMode\n            ? theme.palette.background.default\n            : theme.palette.background.paper,\n          color: isDarkMode\n            ? theme.palette.text.primary\n            : theme.palette.text.secondary,\n        }}\n      >\n        <BotIcon\n          color={\n            isDarkMode\n              ? theme.palette.text.primary\n              : theme.palette.text.secondary\n          }\n        />\n      </Avatar>\n      <Card\n        elevation={0}\n        sx={{\n          backgroundColor: 'transparent',\n          border: `0px solid ${theme.palette.background.paper}`,\n          maxWidth: '70%',\n        }}\n      >\n        <CardContent\n          sx={{\n            padding: `${theme.spacing(1.5)}px ${theme.spacing(2)}px !important`,\n          }}\n        >\n          <Box\n            sx={{\n              display: 'flex',\n              gap: theme.spacing(0.5),\n              alignItems: 'center',\n            }}\n          >\n            <Box\n              sx={{\n                width: 8,\n                height: 8,\n                borderRadius: '50%',\n                backgroundColor: theme.palette.text.secondary,\n                animation: 'typing 1.4s infinite',\n                '@keyframes typing': {\n                  '0%, 60%, 100%': {\n                    transform: 'translateY(0)',\n                    opacity: 0.5,\n                  },\n                  '30%': {\n                    transform: 'translateY(-10px)',\n                    opacity: 1,\n                  },\n                },\n              }}\n            />\n            <Box\n              sx={{\n                width: 8,\n                height: 8,\n                borderRadius: '50%',\n                backgroundColor: theme.palette.text.secondary,\n                animation: 'typing 1.4s infinite',\n                animationDelay: '0.2s',\n                '@keyframes typing': {\n                  '0%, 60%, 100%': {\n                    transform: 'translateY(0)',\n                    opacity: 0.5,\n                  },\n                  '30%': {\n                    transform: 'translateY(-10px)',\n                    opacity: 1,\n                  },\n                },\n              }}\n            />\n            <Box\n              sx={{\n                width: 8,\n                height: 8,\n                borderRadius: '50%',\n                backgroundColor: theme.palette.text.secondary,\n                animation: 'typing 1.4s infinite',\n                animationDelay: '0.4s',\n                '@keyframes typing': {\n                  '0%, 60%, 100%': {\n                    transform: 'translateY(0)',\n                    opacity: 0.5,\n                  },\n                  '30%': {\n                    transform: 'translateY(-10px)',\n                    opacity: 1,\n                  },\n                },\n              }}\n            />\n            <Typography\n              variant=\"caption\"\n              sx={{ marginLeft: 1, color: theme.palette.text.secondary }}\n            >\n              Hang on...\n            </Typography>\n          </Box>\n        </CardContent>\n      </Card>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ChatPage/ChatPage.esm.js

@@ -0,0 +1,142 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { Page, Content, ResponseErrorPanel } from '@backstage/core-components';
+import { ChatContainer } from '../ChatContainer/ChatContainer.esm.js';
+import '@mui/icons-material/Build';
+import '@mui/icons-material/Code';
+import '@mui/icons-material/FileCopy';
+import '@mui/icons-material/Person';
+import '@mui/material/Avatar';
+import '@mui/material/Card';
+import '@mui/material/Chip';
+import '@mui/material/Collapse';
+import '@mui/material/IconButton';
+import '@mui/material/Typography';
+import 'react-markdown';
+import '@mui/icons-material/BugReport';
+import '@mui/icons-material/Cloud';
+import '@mui/icons-material/DataUsage';
+import '@mui/icons-material/DeveloperMode';
+import '@mui/icons-material/Search';
+import '@mui/icons-material/Security';
+import '@mui/icons-material/Settings';
+import '@mui/icons-material/Storage';
+import '@mui/icons-material/TrendingUp';
+import '@mui/material/CardContent';
+import '@mui/material/Grid';
+import '@backstage/core-plugin-api';
+import '@mui/icons-material/Speed';
+import '@mui/icons-material/Extension';
+import '@mui/icons-material/Web';
+import '@mui/icons-material/Devices';
+import '@mui/icons-material/Computer';
+import { RightPane } from '../RightPane/RightPane.esm.js';
+import '@mui/icons-material/ExpandMore';
+import '@mui/material/Accordion';
+import '@mui/material/AccordionDetails';
+import '@mui/material/AccordionSummary';
+import '@mui/material/CircularProgress';
+import '@mui/icons-material/FiberManualRecord';
+import '@mui/icons-material/Memory';
+import '@mui/material/Tooltip';
+import { useProviderStatus } from '../../hooks/useProviderStatus.esm.js';
+import { useMcpServers } from '../../hooks/useMcpServers.esm.js';
+import 'react-use/esm/useAsyncRetry';
+import '../../api/index.esm.js';
+
+const ChatPage = () => {
+  const theme = useTheme();
+  const providerStatus = useProviderStatus();
+  const {
+    mcpServers,
+    error: mcpServersError,
+    handleServerToggle
+  } = useMcpServers();
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
+  const [error, setError] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const chatContainerRef = useRef(null);
+  const combinedError = error || mcpServersError;
+  const toggleSidebar = () => {
+    setSidebarCollapsed(!sidebarCollapsed);
+  };
+  const handleNewChat = () => {
+    if (chatContainerRef.current) {
+      chatContainerRef.current.cancelOngoingRequest();
+    }
+    setError(null);
+    setMessages([]);
+  };
+  const handleMessagesChange = (newMessages) => {
+    setMessages(newMessages);
+  };
+  return /* @__PURE__ */ jsx(Page, { themeId: "tool", children: /* @__PURE__ */ jsx(Content, { noPadding: true, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100vh",
+        backgroundColor: theme.palette.background.default
+      },
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            flex: 1,
+            overflow: "hidden",
+            position: "relative"
+          },
+          children: combinedError ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                width: "100%",
+                height: "100%",
+                padding: "20px"
+              },
+              children: /* @__PURE__ */ jsx(
+                ResponseErrorPanel,
+                {
+                  error: new Error(combinedError),
+                  defaultExpanded: true
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              ChatContainer,
+              {
+                ref: chatContainerRef,
+                sidebarCollapsed,
+                mcpServers,
+                messages,
+                onMessagesChange: handleMessagesChange
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              RightPane,
+              {
+                sidebarCollapsed,
+                onToggleSidebar: toggleSidebar,
+                onNewChat: handleNewChat,
+                mcpServers,
+                onServerToggle: handleServerToggle,
+                providerStatus
+              }
+            )
+          ] })
+        }
+      )
+    }
+  ) }) });
+};
+
+export { ChatPage };
+//# sourceMappingURL=ChatPage.esm.js.map

package/dist/components/ChatPage/ChatPage.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatPage.esm.js","sources":["../../../src/components/ChatPage/ChatPage.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState, useRef } from 'react';\nimport { useTheme } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport { Content, Page, ResponseErrorPanel } from '@backstage/core-components';\nimport { ChatContainer, type ChatContainerRef } from '../ChatContainer';\nimport { RightPane } from '../RightPane';\nimport { useProviderStatus, useMcpServers } from '../../hooks';\n\ninterface Message {\n  id: string;\n  text: string;\n  isUser: boolean;\n  timestamp: Date;\n  tools?: string[];\n  toolsUsed?: string[];\n  toolResponses?: any[];\n}\n\nexport const ChatPage = () => {\n  const theme = useTheme();\n\n  const providerStatus = useProviderStatus();\n  const {\n    mcpServers,\n    error: mcpServersError,\n    handleServerToggle,\n  } = useMcpServers();\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(true);\n\n  const [error, setError] = useState<string | null>(null);\n  const [messages, setMessages] = useState<Message[]>([]);\n  const chatContainerRef = useRef<ChatContainerRef>(null);\n\n  // Combine errors from different sources\n  const combinedError = error || mcpServersError;\n\n  const toggleSidebar = () => {\n    setSidebarCollapsed(!sidebarCollapsed);\n  };\n\n  const handleNewChat = () => {\n    // Cancel any ongoing request first\n    if (chatContainerRef.current) {\n      chatContainerRef.current.cancelOngoingRequest();\n    }\n\n    setError(null);\n    setMessages([]);\n  };\n\n  const handleMessagesChange = (newMessages: Message[]) => {\n    setMessages(newMessages);\n  };\n\n  return (\n    <Page themeId=\"tool\">\n      <Content noPadding>\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            height: '100vh',\n            backgroundColor: theme.palette.background.default,\n          }}\n        >\n          {/* Content Area */}\n          <Box\n            sx={{\n              display: 'flex',\n              flex: 1,\n              overflow: 'hidden',\n              position: 'relative',\n            }}\n          >\n            {combinedError ? (\n              <Box\n                sx={{\n                  display: 'flex',\n                  justifyContent: 'center',\n                  alignItems: 'center',\n                  width: '100%',\n                  height: '100%',\n                  padding: '20px',\n                }}\n              >\n                <ResponseErrorPanel\n                  error={new Error(combinedError)}\n                  defaultExpanded\n                />\n              </Box>\n            ) : (\n              <>\n                {/* Chat Container */}\n                <ChatContainer\n                  ref={chatContainerRef}\n                  sidebarCollapsed={sidebarCollapsed}\n                  mcpServers={mcpServers}\n                  messages={messages}\n                  onMessagesChange={handleMessagesChange}\n                />\n\n                {/* Sidebar - Right Side */}\n                <RightPane\n                  sidebarCollapsed={sidebarCollapsed}\n                  onToggleSidebar={toggleSidebar}\n                  onNewChat={handleNewChat}\n                  mcpServers={mcpServers}\n                  onServerToggle={handleServerToggle}\n                  providerStatus={providerStatus}\n                />\n              </>\n            )}\n          </Box>\n        </Box>\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ChatPage/index.esm.js

@@ -0,0 +1,2 @@
+export { ChatPage } from './ChatPage.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/components/ChatPage/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}