@backstage-community/plugin-mcp-chat 0.1.2 → 0.3.0

package/dist/components/RightPane/ConversationHistory.esm.js

@@ -0,0 +1,218 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import CircularProgress from '@mui/material/CircularProgress';
+import ChatIcon from '@mui/icons-material/Chat';
+import StarIcon from '@mui/icons-material/Star';
+import SearchOffIcon from '@mui/icons-material/SearchOff';
+import { ConversationSearchBar } from './ConversationSearchBar.esm.js';
+import { ConversationItem } from './ConversationItem.esm.js';
+
+const ConversationHistory = ({
+  starredConversations,
+  recentConversations,
+  loading,
+  error,
+  searchQuery,
+  onSearchChange,
+  onSearchClear,
+  onSelectConversation,
+  onToggleStar,
+  onDelete,
+  selectedConversationId
+}) => {
+  const theme = useTheme();
+  const hasConversations = starredConversations.length > 0 || recentConversations.length > 0;
+  const isSearchActive = searchQuery.length >= 2;
+  const noSearchResults = isSearchActive && !hasConversations;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          ConversationSearchBar,
+          {
+            value: searchQuery,
+            onChange: onSearchChange,
+            onClear: onSearchClear
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              flex: 1,
+              overflowY: "auto",
+              padding: theme.spacing(0, 1, 1)
+            },
+            children: [
+              loading && !hasConversations && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                    padding: theme.spacing(4)
+                  },
+                  children: /* @__PURE__ */ jsx(CircularProgress, { size: 24 })
+                }
+              ),
+              !loading && error && !hasConversations && /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "body2",
+                  color: "error",
+                  sx: {
+                    padding: theme.spacing(2),
+                    textAlign: "center"
+                  },
+                  children: error
+                }
+              ),
+              noSearchResults && /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    padding: theme.spacing(4),
+                    color: theme.palette.text.secondary
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      SearchOffIcon,
+                      {
+                        sx: { fontSize: 48, marginBottom: 2, opacity: 0.5 }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No conversations found" }),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "caption",
+                        color: "text.secondary",
+                        sx: { marginTop: 1 },
+                        children: "Try a different search term"
+                      }
+                    )
+                  ]
+                }
+              ),
+              !hasConversations && !loading && !error && !isSearchActive && /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    padding: theme.spacing(4),
+                    color: theme.palette.text.secondary
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(ChatIcon, { sx: { fontSize: 48, marginBottom: 2, opacity: 0.5 } }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No conversations yet" }),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "caption",
+                        color: "text.secondary",
+                        sx: { marginTop: 1 },
+                        children: "Start a new chat to see your history here"
+                      }
+                    )
+                  ]
+                }
+              ),
+              starredConversations.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 0.5,
+                      padding: theme.spacing(1, 0.5),
+                      color: theme.palette.text.secondary
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(StarIcon, { sx: { fontSize: 14 } }),
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "caption",
+                          sx: { fontWeight: 600, textTransform: "uppercase" },
+                          children: "Starred"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(List, { dense: true, sx: { padding: 0 }, children: starredConversations.map((conversation) => /* @__PURE__ */ jsx(
+                  ConversationItem,
+                  {
+                    conversation,
+                    isSelected: selectedConversationId === conversation.id,
+                    onSelect: () => onSelectConversation(conversation),
+                    onToggleStar: () => onToggleStar(conversation.id),
+                    onDelete: () => onDelete(conversation.id)
+                  },
+                  conversation.id
+                )) })
+              ] }),
+              starredConversations.length > 0 && recentConversations.length > 0 && /* @__PURE__ */ jsx(Divider, { sx: { my: 1 } }),
+              recentConversations.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                starredConversations.length > 0 && /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 0.5,
+                      padding: theme.spacing(1, 0.5),
+                      color: theme.palette.text.secondary
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(ChatIcon, { sx: { fontSize: 14 } }),
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "caption",
+                          sx: { fontWeight: 600, textTransform: "uppercase" },
+                          children: "Recent"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(List, { dense: true, sx: { padding: 0 }, children: recentConversations.map((conversation) => /* @__PURE__ */ jsx(
+                  ConversationItem,
+                  {
+                    conversation,
+                    isSelected: selectedConversationId === conversation.id,
+                    onSelect: () => onSelectConversation(conversation),
+                    onToggleStar: () => onToggleStar(conversation.id),
+                    onDelete: () => onDelete(conversation.id)
+                  },
+                  conversation.id
+                )) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { ConversationHistory };
+//# sourceMappingURL=ConversationHistory.esm.js.map

package/dist/components/RightPane/ConversationHistory.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationHistory.esm.js","sources":["../../../src/components/RightPane/ConversationHistory.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 { FC } from 'react';\nimport { useTheme } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport List from '@mui/material/List';\nimport Divider from '@mui/material/Divider';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport ChatIcon from '@mui/icons-material/Chat';\nimport StarIcon from '@mui/icons-material/Star';\nimport SearchOffIcon from '@mui/icons-material/SearchOff';\nimport { ConversationSearchBar } from './ConversationSearchBar';\nimport { ConversationItem } from './ConversationItem';\nimport type { ConversationRecord } from '../../types';\n\ninterface ConversationHistoryProps {\n  /** Starred conversations */\n  starredConversations: ConversationRecord[];\n  /** Non-starred (recent) conversations */\n  recentConversations: ConversationRecord[];\n  /** Whether conversations are loading */\n  loading: boolean;\n  /** Error message if loading failed */\n  error?: string;\n  /** Current search query */\n  searchQuery: string;\n  /** Callback to set search query */\n  onSearchChange: (query: string) => void;\n  /** Callback to clear search */\n  onSearchClear: () => void;\n  /** Callback when a conversation is selected */\n  onSelectConversation: (conversation: ConversationRecord) => void;\n  /** Callback to toggle star status */\n  onToggleStar: (id: string) => void;\n  /** Callback to delete a conversation */\n  onDelete: (id: string) => void;\n  /** Currently selected conversation ID */\n  selectedConversationId?: string;\n}\n\n/**\n * Displays a list of conversation history items with search, star, and delete functionality.\n * Shows starred conversations at the top, followed by recent conversations.\n */\nexport const ConversationHistory: FC<ConversationHistoryProps> = ({\n  starredConversations,\n  recentConversations,\n  loading,\n  error,\n  searchQuery,\n  onSearchChange,\n  onSearchClear,\n  onSelectConversation,\n  onToggleStar,\n  onDelete,\n  selectedConversationId,\n}) => {\n  const theme = useTheme();\n\n  const hasConversations =\n    starredConversations.length > 0 || recentConversations.length > 0;\n  const isSearchActive = searchQuery.length >= 2;\n  const noSearchResults = isSearchActive && !hasConversations;\n\n  return (\n    <Box\n      sx={{\n        flex: 1,\n        display: 'flex',\n        flexDirection: 'column',\n        overflow: 'hidden',\n      }}\n    >\n      {/* Search bar */}\n      <ConversationSearchBar\n        value={searchQuery}\n        onChange={onSearchChange}\n        onClear={onSearchClear}\n      />\n\n      {/* Scrollable content */}\n      <Box\n        sx={{\n          flex: 1,\n          overflowY: 'auto',\n          padding: theme.spacing(0, 1, 1),\n        }}\n      >\n        {/* Loading state */}\n        {loading && !hasConversations && (\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: 'center',\n              padding: theme.spacing(4),\n            }}\n          >\n            <CircularProgress size={24} />\n          </Box>\n        )}\n\n        {/* Error state */}\n        {!loading && error && !hasConversations && (\n          <Typography\n            variant=\"body2\"\n            color=\"error\"\n            sx={{\n              padding: theme.spacing(2),\n              textAlign: 'center',\n            }}\n          >\n            {error}\n          </Typography>\n        )}\n\n        {/* No search results */}\n        {noSearchResults && (\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              alignItems: 'center',\n              padding: theme.spacing(4),\n              color: theme.palette.text.secondary,\n            }}\n          >\n            <SearchOffIcon\n              sx={{ fontSize: 48, marginBottom: 2, opacity: 0.5 }}\n            />\n            <Typography variant=\"body2\" color=\"text.secondary\">\n              No conversations found\n            </Typography>\n            <Typography\n              variant=\"caption\"\n              color=\"text.secondary\"\n              sx={{ marginTop: 1 }}\n            >\n              Try a different search term\n            </Typography>\n          </Box>\n        )}\n\n        {/* Empty state (no search active) */}\n        {!hasConversations && !loading && !error && !isSearchActive && (\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              alignItems: 'center',\n              padding: theme.spacing(4),\n              color: theme.palette.text.secondary,\n            }}\n          >\n            <ChatIcon sx={{ fontSize: 48, marginBottom: 2, opacity: 0.5 }} />\n            <Typography variant=\"body2\" color=\"text.secondary\">\n              No conversations yet\n            </Typography>\n            <Typography\n              variant=\"caption\"\n              color=\"text.secondary\"\n              sx={{ marginTop: 1 }}\n            >\n              Start a new chat to see your history here\n            </Typography>\n          </Box>\n        )}\n\n        {/* Starred conversations section */}\n        {starredConversations.length > 0 && (\n          <>\n            <Box\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: 0.5,\n                padding: theme.spacing(1, 0.5),\n                color: theme.palette.text.secondary,\n              }}\n            >\n              <StarIcon sx={{ fontSize: 14 }} />\n              <Typography\n                variant=\"caption\"\n                sx={{ fontWeight: 600, textTransform: 'uppercase' }}\n              >\n                Starred\n              </Typography>\n            </Box>\n            <List dense sx={{ padding: 0 }}>\n              {starredConversations.map(conversation => (\n                <ConversationItem\n                  key={conversation.id}\n                  conversation={conversation}\n                  isSelected={selectedConversationId === conversation.id}\n                  onSelect={() => onSelectConversation(conversation)}\n                  onToggleStar={() => onToggleStar(conversation.id)}\n                  onDelete={() => onDelete(conversation.id)}\n                />\n              ))}\n            </List>\n          </>\n        )}\n\n        {/* Divider between starred and recent */}\n        {starredConversations.length > 0 && recentConversations.length > 0 && (\n          <Divider sx={{ my: 1 }} />\n        )}\n\n        {/* Recent conversations section */}\n        {recentConversations.length > 0 && (\n          <>\n            {starredConversations.length > 0 && (\n              <Box\n                sx={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: 0.5,\n                  padding: theme.spacing(1, 0.5),\n                  color: theme.palette.text.secondary,\n                }}\n              >\n                <ChatIcon sx={{ fontSize: 14 }} />\n                <Typography\n                  variant=\"caption\"\n                  sx={{ fontWeight: 600, textTransform: 'uppercase' }}\n                >\n                  Recent\n                </Typography>\n              </Box>\n            )}\n            <List dense sx={{ padding: 0 }}>\n              {recentConversations.map(conversation => (\n                <ConversationItem\n                  key={conversation.id}\n                  conversation={conversation}\n                  isSelected={selectedConversationId === conversation.id}\n                  onSelect={() => onSelectConversation(conversation)}\n                  onToggleStar={() => onToggleStar(conversation.id)}\n                  onDelete={() => onDelete(conversation.id)}\n                />\n              ))}\n            </List>\n          </>\n        )}\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/RightPane/ConversationItem.esm.js

@@ -0,0 +1,241 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import IconButton from '@mui/material/IconButton';
+import Popover from '@mui/material/Popover';
+import Button from '@mui/material/Button';
+import StarIcon from '@mui/icons-material/Star';
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+
+const ConversationItem = ({
+  conversation,
+  isSelected,
+  onSelect,
+  onToggleStar,
+  onDelete
+}) => {
+  const theme = useTheme();
+  const [deleteAnchor, setDeleteAnchor] = useState(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const getDisplayTitle = () => {
+    if (conversation.title) {
+      return conversation.title;
+    }
+    const firstUserMessage = conversation.messages.find((m) => m.role === "user");
+    const content = firstUserMessage?.content || "Empty conversation";
+    return content.length > 40 ? `${content.substring(0, 40)}...` : content;
+  };
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    const now = /* @__PURE__ */ new Date();
+    const diffDays = Math.floor(
+      (now.getTime() - date.getTime()) / (1e3 * 60 * 60 * 24)
+    );
+    if (diffDays === 0) {
+      return "Today";
+    } else if (diffDays === 1) {
+      return "Yesterday";
+    } else if (diffDays < 7) {
+      return `${diffDays} days ago`;
+    }
+    return date.toLocaleDateString();
+  };
+  const handleDeleteClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+      setDeleteAnchor(event.currentTarget);
+    },
+    []
+  );
+  const handleDeleteClose = useCallback(() => {
+    setDeleteAnchor(null);
+  }, []);
+  const handleDeleteConfirm = useCallback(() => {
+    setDeleteAnchor(null);
+    onDelete();
+  }, [onDelete]);
+  const handleStarClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+      onToggleStar();
+    },
+    [onToggleStar]
+  );
+  const showActions = isHovered || isSelected || Boolean(deleteAnchor);
+  return /* @__PURE__ */ jsxs(
+    ListItem,
+    {
+      disablePadding: true,
+      sx: { mb: 0.5 },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ jsxs(
+          ListItemButton,
+          {
+            selected: isSelected,
+            onClick: onSelect,
+            sx: {
+              borderRadius: 1,
+              padding: theme.spacing(1, 1.5),
+              position: "relative",
+              "&.Mui-selected": {
+                backgroundColor: theme.palette.action.selected,
+                "&:hover": {
+                  backgroundColor: theme.palette.action.hover
+                }
+              },
+              "&:hover": {
+                backgroundColor: theme.palette.action.hover
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0, pr: showActions ? 6 : 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "body2",
+                    sx: {
+                      fontWeight: isSelected ? 600 : 400,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      color: theme.palette.text.primary
+                    },
+                    children: getDisplayTitle()
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      marginTop: 0.5
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "caption",
+                          color: "text.secondary",
+                          sx: { fontSize: "0.7rem" },
+                          children: formatDate(conversation.updatedAt)
+                        }
+                      ),
+                      conversation.toolsUsed && conversation.toolsUsed.length > 0 && /* @__PURE__ */ jsxs(
+                        Typography,
+                        {
+                          variant: "caption",
+                          color: "text.secondary",
+                          sx: { fontSize: "0.65rem" },
+                          children: [
+                            conversation.toolsUsed.length,
+                            " tool",
+                            conversation.toolsUsed.length > 1 ? "s" : ""
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] }),
+              showActions && /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    position: "absolute",
+                    right: theme.spacing(1),
+                    top: "50%",
+                    transform: "translateY(-50%)",
+                    display: "flex",
+                    gap: 0.5,
+                    backgroundColor: isSelected ? theme.palette.action.selected : theme.palette.background.paper,
+                    borderRadius: 1,
+                    padding: "2px"
+                  },
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "small",
+                        onClick: handleStarClick,
+                        sx: {
+                          padding: 0.5,
+                          color: conversation.isStarred ? theme.palette.warning.main : theme.palette.text.secondary,
+                          "&:hover": {
+                            color: theme.palette.warning.main
+                          }
+                        },
+                        "aria-label": conversation.isStarred ? "Remove from favorites" : "Add to favorites",
+                        children: conversation.isStarred ? /* @__PURE__ */ jsx(StarIcon, { sx: { fontSize: 18 } }) : /* @__PURE__ */ jsx(StarBorderIcon, { sx: { fontSize: 18 } })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "small",
+                        onClick: handleDeleteClick,
+                        sx: {
+                          padding: 0.5,
+                          color: theme.palette.text.secondary,
+                          "&:hover": {
+                            color: theme.palette.error.main
+                          }
+                        },
+                        "aria-label": "Delete conversation",
+                        children: /* @__PURE__ */ jsx(DeleteOutlineIcon, { sx: { fontSize: 18 } })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            open: Boolean(deleteAnchor),
+            anchorEl: deleteAnchor,
+            onClose: handleDeleteClose,
+            anchorOrigin: {
+              vertical: "bottom",
+              horizontal: "center"
+            },
+            transformOrigin: {
+              vertical: "top",
+              horizontal: "center"
+            },
+            children: /* @__PURE__ */ jsxs(Box, { sx: { p: 2, maxWidth: 250 }, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mb: 1.5 }, children: "Delete this conversation? This action cannot be undone." }),
+              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1, justifyContent: "flex-end" }, children: [
+                /* @__PURE__ */ jsx(Button, { size: "small", onClick: handleDeleteClose, children: "Cancel" }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    color: "error",
+                    variant: "contained",
+                    onClick: handleDeleteConfirm,
+                    children: "Delete"
+                  }
+                )
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { ConversationItem };
+//# sourceMappingURL=ConversationItem.esm.js.map

package/dist/components/RightPane/ConversationItem.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationItem.esm.js","sources":["../../../src/components/RightPane/ConversationItem.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 */\n\nimport { FC, useState, useCallback } from 'react';\nimport { useTheme } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport IconButton from '@mui/material/IconButton';\nimport Popover from '@mui/material/Popover';\nimport Button from '@mui/material/Button';\nimport StarIcon from '@mui/icons-material/Star';\nimport StarBorderIcon from '@mui/icons-material/StarBorder';\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\nimport type { ConversationRecord } from '../../types';\n\ninterface ConversationItemProps {\n  /** The conversation to display */\n  conversation: ConversationRecord;\n  /** Whether this conversation is currently selected */\n  isSelected: boolean;\n  /** Called when the conversation is clicked */\n  onSelect: () => void;\n  /** Called when the star button is clicked */\n  onToggleStar: () => void;\n  /** Called when delete is confirmed */\n  onDelete: () => void;\n}\n\n/**\n * Single conversation item in the history list.\n * Displays title, date, and action buttons (star, delete).\n */\nexport const ConversationItem: FC<ConversationItemProps> = ({\n  conversation,\n  isSelected,\n  onSelect,\n  onToggleStar,\n  onDelete,\n}) => {\n  const theme = useTheme();\n  const [deleteAnchor, setDeleteAnchor] = useState<HTMLElement | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  // Get display title - use title if available, fallback to first user message\n  const getDisplayTitle = (): string => {\n    if (conversation.title) {\n      return conversation.title;\n    }\n    const firstUserMessage = conversation.messages.find(m => m.role === 'user');\n    const content = firstUserMessage?.content || 'Empty conversation';\n    return content.length > 40 ? `${content.substring(0, 40)}...` : content;\n  };\n\n  // Format date to relative or absolute\n  const formatDate = (dateString: string): string => {\n    const date = new Date(dateString);\n    const now = new Date();\n    const diffDays = Math.floor(\n      (now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24),\n    );\n\n    if (diffDays === 0) {\n      return 'Today';\n    } else if (diffDays === 1) {\n      return 'Yesterday';\n    } else if (diffDays < 7) {\n      return `${diffDays} days ago`;\n    }\n    return date.toLocaleDateString();\n  };\n\n  const handleDeleteClick = useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      event.stopPropagation();\n      setDeleteAnchor(event.currentTarget);\n    },\n    [],\n  );\n\n  const handleDeleteClose = useCallback(() => {\n    setDeleteAnchor(null);\n  }, []);\n\n  const handleDeleteConfirm = useCallback(() => {\n    setDeleteAnchor(null);\n    onDelete();\n  }, [onDelete]);\n\n  const handleStarClick = useCallback(\n    (event: React.MouseEvent) => {\n      event.stopPropagation();\n      onToggleStar();\n    },\n    [onToggleStar],\n  );\n\n  const showActions = isHovered || isSelected || Boolean(deleteAnchor);\n\n  return (\n    <ListItem\n      disablePadding\n      sx={{ mb: 0.5 }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <ListItemButton\n        selected={isSelected}\n        onClick={onSelect}\n        sx={{\n          borderRadius: 1,\n          padding: theme.spacing(1, 1.5),\n          position: 'relative',\n          '&.Mui-selected': {\n            backgroundColor: theme.palette.action.selected,\n            '&:hover': {\n              backgroundColor: theme.palette.action.hover,\n            },\n          },\n          '&:hover': {\n            backgroundColor: theme.palette.action.hover,\n          },\n        }}\n      >\n        {/* Content */}\n        <Box sx={{ flex: 1, minWidth: 0, pr: showActions ? 6 : 0 }}>\n          <Typography\n            variant=\"body2\"\n            sx={{\n              fontWeight: isSelected ? 600 : 400,\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              whiteSpace: 'nowrap',\n              color: theme.palette.text.primary,\n            }}\n          >\n            {getDisplayTitle()}\n          </Typography>\n\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: 'space-between',\n              alignItems: 'center',\n              marginTop: 0.5,\n            }}\n          >\n            <Typography\n              variant=\"caption\"\n              color=\"text.secondary\"\n              sx={{ fontSize: '0.7rem' }}\n            >\n              {formatDate(conversation.updatedAt)}\n            </Typography>\n            {conversation.toolsUsed && conversation.toolsUsed.length > 0 && (\n              <Typography\n                variant=\"caption\"\n                color=\"text.secondary\"\n                sx={{ fontSize: '0.65rem' }}\n              >\n                {conversation.toolsUsed.length} tool\n                {conversation.toolsUsed.length > 1 ? 's' : ''}\n              </Typography>\n            )}\n          </Box>\n        </Box>\n\n        {/* Action buttons - shown on hover or selection */}\n        {showActions && (\n          <Box\n            sx={{\n              position: 'absolute',\n              right: theme.spacing(1),\n              top: '50%',\n              transform: 'translateY(-50%)',\n              display: 'flex',\n              gap: 0.5,\n              backgroundColor: isSelected\n                ? theme.palette.action.selected\n                : theme.palette.background.paper,\n              borderRadius: 1,\n              padding: '2px',\n            }}\n            onClick={e => e.stopPropagation()}\n          >\n            <IconButton\n              size=\"small\"\n              onClick={handleStarClick}\n              sx={{\n                padding: 0.5,\n                color: conversation.isStarred\n                  ? theme.palette.warning.main\n                  : theme.palette.text.secondary,\n                '&:hover': {\n                  color: theme.palette.warning.main,\n                },\n              }}\n              aria-label={\n                conversation.isStarred\n                  ? 'Remove from favorites'\n                  : 'Add to favorites'\n              }\n            >\n              {conversation.isStarred ? (\n                <StarIcon sx={{ fontSize: 18 }} />\n              ) : (\n                <StarBorderIcon sx={{ fontSize: 18 }} />\n              )}\n            </IconButton>\n\n            <IconButton\n              size=\"small\"\n              onClick={handleDeleteClick}\n              sx={{\n                padding: 0.5,\n                color: theme.palette.text.secondary,\n                '&:hover': {\n                  color: theme.palette.error.main,\n                },\n              }}\n              aria-label=\"Delete conversation\"\n            >\n              <DeleteOutlineIcon sx={{ fontSize: 18 }} />\n            </IconButton>\n          </Box>\n        )}\n      </ListItemButton>\n\n      {/* Delete confirmation popover */}\n      <Popover\n        open={Boolean(deleteAnchor)}\n        anchorEl={deleteAnchor}\n        onClose={handleDeleteClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'center',\n        }}\n      >\n        <Box sx={{ p: 2, maxWidth: 250 }}>\n          <Typography variant=\"body2\" sx={{ mb: 1.5 }}>\n            Delete this conversation? This action cannot be undone.\n          </Typography>\n          <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>\n            <Button size=\"small\" onClick={handleDeleteClose}>\n              Cancel\n            </Button>\n            <Button\n              size=\"small\"\n              color=\"error\"\n              variant=\"contained\"\n              onClick={handleDeleteConfirm}\n            >\n              Delete\n            </Button>\n          </Box>\n        </Box>\n      </Popover>\n    </ListItem>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/RightPane/ConversationSearchBar.esm.js

@@ -0,0 +1,104 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import IconButton from '@mui/material/IconButton';
+import SearchIcon from '@mui/icons-material/Search';
+import ClearIcon from '@mui/icons-material/Clear';
+
+const DEBOUNCE_DELAY = 300;
+const ConversationSearchBar = ({
+  value,
+  onChange,
+  onClear,
+  placeholder = "Search conversations..."
+}) => {
+  const theme = useTheme();
+  const [localValue, setLocalValue] = useState(value);
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (localValue !== value) {
+        onChange(localValue);
+      }
+    }, DEBOUNCE_DELAY);
+    return () => clearTimeout(timer);
+  }, [localValue, value, onChange]);
+  const handleChange = useCallback(
+    (event) => {
+      setLocalValue(event.target.value);
+    },
+    []
+  );
+  const handleClear = useCallback(() => {
+    setLocalValue("");
+    onClear();
+  }, [onClear]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        handleClear();
+      }
+    },
+    [handleClear]
+  );
+  return /* @__PURE__ */ jsx(Box, { sx: { padding: theme.spacing(1, 1.5) }, children: /* @__PURE__ */ jsx(
+    TextField,
+    {
+      fullWidth: true,
+      size: "small",
+      placeholder,
+      value: localValue,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      InputProps: {
+        startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
+          SearchIcon,
+          {
+            sx: {
+              color: theme.palette.text.secondary,
+              fontSize: 20
+            }
+          }
+        ) }),
+        endAdornment: localValue ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: handleClear,
+            sx: { padding: 0.5 },
+            "aria-label": "Clear search",
+            children: /* @__PURE__ */ jsx(ClearIcon, { sx: { fontSize: 18 } })
+          }
+        ) }) : null
+      },
+      sx: {
+        "& .MuiOutlinedInput-root": {
+          borderRadius: 2,
+          backgroundColor: theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.03)",
+          "& fieldset": {
+            borderColor: "transparent"
+          },
+          "&:hover fieldset": {
+            borderColor: theme.palette.divider
+          },
+          "&.Mui-focused fieldset": {
+            borderColor: theme.palette.primary.main,
+            borderWidth: 1
+          }
+        },
+        "& .MuiOutlinedInput-input": {
+          padding: theme.spacing(1, 0),
+          fontSize: "0.875rem"
+        }
+      }
+    }
+  ) });
+};
+
+export { ConversationSearchBar };
+//# sourceMappingURL=ConversationSearchBar.esm.js.map

package/dist/components/RightPane/ConversationSearchBar.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationSearchBar.esm.js","sources":["../../../src/components/RightPane/ConversationSearchBar.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 */\n\nimport { FC, useState, useEffect, useCallback } from 'react';\nimport { useTheme } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport TextField from '@mui/material/TextField';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport IconButton from '@mui/material/IconButton';\nimport SearchIcon from '@mui/icons-material/Search';\nimport ClearIcon from '@mui/icons-material/Clear';\n\n/** Debounce delay in milliseconds */\nconst DEBOUNCE_DELAY = 300;\n\ninterface ConversationSearchBarProps {\n  /** Current search value */\n  value: string;\n  /** Called when search value changes (debounced) */\n  onChange: (value: string) => void;\n  /** Called when search is cleared */\n  onClear: () => void;\n  /** Placeholder text */\n  placeholder?: string;\n}\n\n/**\n * Search bar component for filtering conversations.\n * Includes debouncing for smooth filtering.\n */\nexport const ConversationSearchBar: FC<ConversationSearchBarProps> = ({\n  value,\n  onChange,\n  onClear,\n  placeholder = 'Search conversations...',\n}) => {\n  const theme = useTheme();\n  const [localValue, setLocalValue] = useState(value);\n\n  // Sync local value with prop value\n  useEffect(() => {\n    setLocalValue(value);\n  }, [value]);\n\n  // Debounced onChange handler\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      if (localValue !== value) {\n        onChange(localValue);\n      }\n    }, DEBOUNCE_DELAY);\n\n    return () => clearTimeout(timer);\n  }, [localValue, value, onChange]);\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setLocalValue(event.target.value);\n    },\n    [],\n  );\n\n  const handleClear = useCallback(() => {\n    setLocalValue('');\n    onClear();\n  }, [onClear]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        handleClear();\n      }\n    },\n    [handleClear],\n  );\n\n  return (\n    <Box sx={{ padding: theme.spacing(1, 1.5) }}>\n      <TextField\n        fullWidth\n        size=\"small\"\n        placeholder={placeholder}\n        value={localValue}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <SearchIcon\n                sx={{\n                  color: theme.palette.text.secondary,\n                  fontSize: 20,\n                }}\n              />\n            </InputAdornment>\n          ),\n          endAdornment: localValue ? (\n            <InputAdornment position=\"end\">\n              <IconButton\n                size=\"small\"\n                onClick={handleClear}\n                sx={{ padding: 0.5 }}\n                aria-label=\"Clear search\"\n              >\n                <ClearIcon sx={{ fontSize: 18 }} />\n              </IconButton>\n            </InputAdornment>\n          ) : null,\n        }}\n        sx={{\n          '& .MuiOutlinedInput-root': {\n            borderRadius: 2,\n            backgroundColor:\n              theme.palette.mode === 'dark'\n                ? 'rgba(255, 255, 255, 0.05)'\n                : 'rgba(0, 0, 0, 0.03)',\n            '& fieldset': {\n              borderColor: 'transparent',\n            },\n            '&:hover fieldset': {\n              borderColor: theme.palette.divider,\n            },\n            '&.Mui-focused fieldset': {\n              borderColor: theme.palette.primary.main,\n              borderWidth: 1,\n            },\n          },\n          '& .MuiOutlinedInput-input': {\n            padding: theme.spacing(1, 0),\n            fontSize: '0.875rem',\n          },\n        }}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}