@nualang/nualang-ui-components 0.1.1401 → 0.1.1403

package/dist/Cards/Bot/Bot.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 import PropTypes from "prop-types";
 import { useInView } from "react-intersection-observer";
 import PlaceholderImages from "../../utils/placeholder-images/index";
-import { Button, Typography, CardActionArea, CardActions, Menu, MenuItem, IconButton, Divider, Tooltip } from "@mui/material";
+import { Button, Typography, CardActionArea, CardActions, Checkbox, Menu, MenuItem, IconButton, Divider, Tooltip } from "@mui/material";
 import Skeleton from "@mui/material/Skeleton";
 import Person from "@mui/icons-material/Person";
 import LanguageIcon from "@mui/icons-material/Public";
@@ -120,6 +120,8 @@ function Bot({
   handleOpenPreview,
   disablePreview,
   cardTitleComponent = "h3",
+  selectionEnabled = false,
+  isSelected = false,
   compact = false
 }) {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -278,7 +280,14 @@ function Bot({
           component: cardTitleComponent,
           compact: compact
         }),
-        action: /*#__PURE__*/_jsx(Tooltip, {
+        action: selectionEnabled ? /*#__PURE__*/_jsx(Checkbox, {
+          checked: isSelected,
+          onChange: selectBot,
+          onClick: e => e.stopPropagation(),
+          color: "primary",
+          disabled: disableActions,
+          "aria-label": `${t("select")}: ${botName}`
+        }) : /*#__PURE__*/_jsx(Tooltip, {
           title: t("more_options"),
           children: /*#__PURE__*/_jsx(IconButton, {
             "aria-label": "More Options",
@@ -358,7 +367,7 @@ function Bot({
         color: "primary",
         variant: "outlined",
         "data-cy": "bot_select_button",
-        disabled: disableActions,
+        disabled: disableActions || selectionEnabled && isSelected,
         "aria-label": `${t(selectText)}: ${botName}`,
         children: t(selectText)
       }), handleOpenPreview && !disablePreview ? /*#__PURE__*/_jsx(Button, {

package/dist/Cards/Roleplay/Roleplay.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 import PropTypes from "prop-types";
 import { useInView } from "react-intersection-observer";
 import PlaceholderImages from "../../utils/placeholder-images/index";
-import { Button, Typography, CardActionArea, Divider, CardActions, Menu, MenuItem, IconButton, Tooltip } from "@mui/material";
+import { Button, Typography, CardActionArea, Divider, CardActions, Checkbox, Menu, MenuItem, IconButton, Tooltip } from "@mui/material";
 import Skeleton from "@mui/material/Skeleton";
 import Person from "@mui/icons-material/Person";
 import LanguageIcon from "@mui/icons-material/Public";
@@ -120,6 +120,8 @@ function Roleplay({
   handleOpenPreview,
   disablePreview,
   cardTitleComponent = "h3",
+  selectionEnabled = false,
+  isSelected = false,
   compact = false
 }) {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -277,7 +279,14 @@ function Roleplay({
           component: cardTitleComponent,
           compact: compact
         }),
-        action: /*#__PURE__*/_jsx(Tooltip, {
+        action: selectionEnabled ? /*#__PURE__*/_jsx(Checkbox, {
+          checked: isSelected,
+          onChange: selectRoleplay,
+          onClick: e => e.stopPropagation(),
+          color: "primary",
+          disabled: disableActions,
+          "aria-label": `${t("select")} roleplay: ${roleplayName}`
+        }) : /*#__PURE__*/_jsx(Tooltip, {
           title: t("more_options"),
           children: /*#__PURE__*/_jsx(IconButton, {
             "aria-label": "More Options",
@@ -357,7 +366,7 @@ function Roleplay({
         color: "primary",
         variant: "outlined",
         "data-cy": "roleplay_select_button",
-        disabled: disableActions,
+        disabled: disableActions || selectionEnabled && isSelected,
         "aria-label": `${t(selectText)}) roleplay: ${roleplayName}`,
         children: t(selectText)
       }), handleOpenPreview && roleplay.roleplayId !== "nualang.author-from-scratch.0.0.1" && !disablePreview ? /*#__PURE__*/_jsx(Button, {

package/dist/Dialogs/FindChatbotDialog/FindChatbotDialog.js

@@ -0,0 +1,321 @@
+import { useState, useEffect, useRef } from "react";
+import { useInView } from "react-intersection-observer";
+import Dialog from "@mui/material/Dialog";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Avatar from "@mui/material/Avatar";
+import Chip from "@mui/material/Chip";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import CloseIcon from "@mui/icons-material/Close";
+import AddIcon from "@mui/icons-material/Add";
+import Bots from "../../Lists/Bots/Bots";
+import PlaceholderImages from "../../utils/placeholder-images/index";
+import { SearchFilters, Transition } from "../SearchFilters/SearchFilters";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function FindChatbotDialog({
+  open,
+  handleClose,
+  onAddChatbots,
+  libraryChatbots = [],
+  communityChatbots = [],
+  isLoadingLibrary = false,
+  isLoadingCommunity = false,
+  onLoadMoreCommunity,
+  hasMoreCommunity = false,
+  isLoadingMoreCommunity = false,
+  t = text => text
+}) {
+  const scrollRef = useRef(null);
+  const {
+    ref: sentinelRef,
+    inView: sentinelInView
+  } = useInView({
+    threshold: 0
+  });
+  const [tab, setTab] = useState(0);
+  const [selectedBotIds, setSelectedBotIds] = useState([]);
+  const [search, setSearch] = useState("");
+  const [filters, setFilters] = useState({
+    difficulty: "all",
+    sort: "newest"
+  });
+  const allChatbots = [...libraryChatbots, ...communityChatbots];
+  const selectedChatbots = allChatbots.filter(bot => selectedBotIds.includes(bot.botId)).filter((bot, index, arr) => arr.findIndex(b => b.botId === bot.botId) === index).map(bot => ({
+    ...bot,
+    picture: bot.picture || bot.botAvatar || PlaceholderImages.bot
+  }));
+  const handleToggle = botId => {
+    setSelectedBotIds(prev => prev.includes(botId) ? prev.filter(id => id !== botId) : [...prev, botId]);
+  };
+  const handleFilterChange = event => {
+    const {
+      name,
+      value
+    } = event.target;
+    setFilters(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+  const handleAdd = () => {
+    onAddChatbots(selectedChatbots);
+    reset();
+    handleClose();
+  };
+  const reset = () => {
+    setSelectedBotIds([]);
+    setSearch("");
+    setFilters({
+      difficulty: "all",
+      sort: "newest"
+    });
+    setTab(0);
+  };
+  const handleDialogClose = () => {
+    reset();
+    handleClose();
+  };
+  useEffect(() => {
+    if (sentinelInView && tab === 1 && hasMoreCommunity && !isLoadingMoreCommunity) {
+      onLoadMoreCommunity?.();
+    }
+  }, [sentinelInView, tab, hasMoreCommunity, isLoadingMoreCommunity, onLoadMoreCommunity]);
+  const handleTabChange = (_, v) => {
+    setTab(v);
+    setSearch("");
+    setFilters({
+      difficulty: "all",
+      sort: "newest"
+    });
+    if (scrollRef.current) scrollRef.current.scrollTop = 0;
+  };
+  const filterChatbots = chatbots => {
+    if (!search.trim()) return chatbots;
+    const q = search.toLowerCase();
+    return chatbots.filter(bot => bot.botName?.toLowerCase().includes(q) || bot.description?.toLowerCase().includes(q) || bot.createdByName?.toLowerCase().includes(q));
+  };
+  const applyCommunityFilters = chatbots => {
+    let result = filterChatbots(chatbots);
+    if (filters.difficulty && filters.difficulty !== "all") {
+      result = result.filter(bot => bot.difficulty === filters.difficulty);
+    }
+    if (filters.sort === "newest") {
+      result = [...result].sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0));
+    } else if (filters.sort === "oldest") {
+      result = [...result].sort((a, b) => new Date(a.createdAt || 0) - new Date(b.createdAt || 0));
+    } else {
+      result = [...result].sort((a, b) => (b.exerciseStartTotal || 0) - (a.exerciseStartTotal || 0));
+    }
+    return result;
+  };
+  const currentChatbots = tab === 0 ? filterChatbots(libraryChatbots) : applyCommunityFilters(communityChatbots);
+  const isLoading = tab === 0 ? isLoadingLibrary : isLoadingCommunity;
+  const sectionLabel = tab === 0 ? t("add_own_exercise_message", {
+    exerciseName: t("chatbots").toLowerCase()
+  }) : t("or_select_a_community_template_desc");
+  const addButtonLabel = selectedBotIds.length > 0 ? `${t("add_chatbots")} (${selectedBotIds.length})` : t("add_chatbots");
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: open,
+    onClose: handleDialogClose,
+    fullScreen: true,
+    TransitionComponent: Transition,
+    PaperProps: {
+      sx: {
+        display: "flex",
+        flexDirection: "column"
+      }
+    },
+    children: [/*#__PURE__*/_jsx(AppBar, {
+      sx: {
+        position: "relative"
+      },
+      children: /*#__PURE__*/_jsxs(Toolbar, {
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          edge: "start",
+          color: "inherit",
+          onClick: handleDialogClose,
+          "aria-label": "close",
+          children: /*#__PURE__*/_jsx(CloseIcon, {})
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "h6",
+          sx: {
+            ml: 1,
+            fontWeight: 700
+          },
+          children: t("find_chatbots") || "Find Chatbots"
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+        minHeight: 0
+      },
+      children: [/*#__PURE__*/_jsx(Box, {
+        sx: {
+          px: 3,
+          pt: 1,
+          borderBottom: 1,
+          borderColor: "divider"
+        },
+        children: /*#__PURE__*/_jsxs(Tabs, {
+          value: tab,
+          onChange: handleTabChange,
+          indicatorColor: "primary",
+          textColor: "primary",
+          children: [/*#__PURE__*/_jsx(Tab, {
+            label: t("my_library") || "My Library"
+          }), /*#__PURE__*/_jsx(Tab, {
+            label: t("community") || "Community"
+          })]
+        })
+      }), tab === 1 && /*#__PURE__*/_jsx(Box, {
+        sx: {
+          px: 3,
+          py: {
+            xs: 0,
+            md: 1.5
+          },
+          borderBottom: 1,
+          borderColor: "divider"
+        },
+        children: /*#__PURE__*/_jsx(SearchFilters, {
+          t: t,
+          difficulty: filters.difficulty,
+          handleFilterChange: handleFilterChange,
+          sort: filters.sort,
+          search: search,
+          setSearch: setSearch
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        ref: scrollRef,
+        sx: {
+          flex: 1,
+          overflowY: "auto",
+          overflowX: "hidden",
+          p: 3
+        },
+        children: isLoading ? /*#__PURE__*/_jsx(Bots, {
+          t: t,
+          selectText: t("select") || "Select",
+          compact: true
+        }) : currentChatbots.length === 0 ? /*#__PURE__*/_jsx(Box, {
+          display: "flex",
+          justifyContent: "center",
+          pt: 8,
+          children: /*#__PURE__*/_jsx(Typography, {
+            color: "text.secondary",
+            children: t("no_chatbots_found") || "No chatbots found"
+          })
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Typography, {
+            color: "text.secondary",
+            sx: {
+              display: "block",
+              mb: 2
+            },
+            children: sectionLabel
+          }), /*#__PURE__*/_jsx(Bots, {
+            t: t,
+            bots: currentChatbots,
+            handleSelectBot: bot => handleToggle(bot.botId),
+            selectText: t("select") || "Select",
+            disablePreview: true,
+            selectionEnabled: true,
+            isSelected: bot => selectedBotIds.includes(bot.botId),
+            compact: true,
+            handleViewUserProfile: () => {}
+          }), tab === 1 && /*#__PURE__*/_jsx(Box, {
+            ref: sentinelRef,
+            sx: {
+              height: 40,
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            children: isLoadingMoreCommunity && /*#__PURE__*/_jsx(CircularProgress, {
+              size: 24
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          px: 3,
+          py: 1.5,
+          borderTop: 1,
+          borderColor: "divider",
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          bgcolor: "background.paper",
+          flexShrink: 0
+        },
+        children: [/*#__PURE__*/_jsxs(Box, {
+          sx: {
+            flex: 1,
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 1,
+            alignItems: "center"
+          },
+          children: [selectedBotIds.length > 0 && /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            sx: {
+              flexShrink: 0
+            },
+            children: `${selectedBotIds.length} ${t("selected") || "selected"}`
+          }), selectedChatbots.map(bot => /*#__PURE__*/_jsx(Chip, {
+            avatar: /*#__PURE__*/_jsx(Avatar, {
+              src: bot.picture,
+              alt: bot.botName
+            }),
+            label: bot.botName,
+            onDelete: () => handleToggle(bot.botId),
+            sx: {
+              flexShrink: 0,
+              display: {
+                xs: "none",
+                sm: "inline-flex"
+              }
+            }
+          }, bot.botId))]
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: "flex",
+            gap: 1.5,
+            alignItems: "center",
+            flexShrink: 0
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            onClick: handleDialogClose,
+            color: "primary",
+            sx: {
+              fontWeight: 600
+            },
+            children: t("cancel") || "Cancel"
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            color: "success",
+            disabled: selectedBotIds.length === 0,
+            onClick: handleAdd,
+            startIcon: /*#__PURE__*/_jsx(AddIcon, {}),
+            sx: {
+              borderRadius: 6,
+              px: 3,
+              py: 1
+            },
+            children: addButtonLabel
+          })]
+        })]
+      })]
+    })]
+  });
+}