@blocklet/pages-kit 0.2.285 → 0.2.287

package/lib/cjs/builtin/async/ai-runtime/components/collection/CollectionEditDialog.js

@@ -0,0 +1,92 @@
+"use strict";
+// import { Icon } from '@iconify/react';
+// import {
+//   Button,
+//   Dialog,
+//   DialogActions,
+//   DialogContent,
+//   DialogProps,
+//   DialogTitle,
+//   Stack,
+//   TextField,
+//   Typography,
+// } from '@mui/material';
+// import { useEffect } from 'react';
+// import { useForm } from 'react-hook-form';
+// import { useLocaleContext } from '../../../../locale';
+// import LoadingButton from '../LoadingButton';
+// export default function CollectionEditDialog({
+//   DialogProps,
+//   onSubmit,
+//   defaultValues,
+// }: {
+//   DialogProps?: DialogProps;
+//   onSubmit?: () => any;
+//   defaultValues?: any;
+// }) {
+//   const { t } = useLocaleContext();
+//   const form = useForm();
+//   useEffect(() => {
+//     if (DialogProps?.open) {
+//       form.reset({
+//         id: defaultValues?.id,
+//         name: defaultValues?.name || '',
+//         description: defaultValues?.description || '',
+//       });
+//     }
+//   }, [DialogProps?.open]);
+//   const isUpdate = !!form.watch('id');
+//   return (
+//     <Dialog
+//       {...DialogProps}
+//       open={DialogProps?.open || false}
+//       fullWidth
+//       maxWidth="sm"
+//       component="form"
+//       onSubmit={form.handleSubmit(onSubmit)}>
+//       <DialogTitle>{t(isUpdate ? 'editObject' : 'newObject', { object: t('collection') })}</DialogTitle>
+//       <DialogContent dividers>
+//         <Stack gap={2.5}>
+//           <Stack gap={0.5}>
+//             <Typography sx={{ fontWeight: 500 }}>{t('name')}</Typography>
+//             <TextField
+//               size="small"
+//               fullWidth
+//               hiddenLabel
+//               autoFocus
+//               placeholder={t('name')}
+//               {...form.register('name')}
+//             />
+//           </Stack>
+//           <Stack gap={0.5}>
+//             <Typography sx={{ fontWeight: 500 }}>{t('description')}</Typography>
+//             <TextField
+//               size="small"
+//               fullWidth
+//               hiddenLabel
+//               multiline
+//               placeholder={t('description')}
+//               minRows={3}
+//               {...form.register('description')}
+//             />
+//           </Stack>
+//         </Stack>
+//       </DialogContent>
+//       <DialogActions>
+//         <Button variant="outlined" color="black" size="small" onClick={DialogProps?.onClose}>
+//           {t('cancel')}
+//         </Button>
+//         <LoadingButton
+//           variant="contained"
+//           type="submit"
+//           color="black"
+//           size="small"
+//           startIcon={<Icon icon={isUpdate ? 'tabler:device-floppy' : 'tabler:plus'} />}
+//           loadingPosition="start"
+//           loading={form.formState.isSubmitting}>
+//           {t(isUpdate ? 'save' : 'create')}
+//         </LoadingButton>
+//       </DialogActions>
+//     </Dialog>
+//   );
+// }

package/lib/cjs/builtin/async/ai-runtime/components/collection/CollectionListView.js

@@ -0,0 +1,197 @@
+"use strict";
+// import { Icon } from '@iconify/react';
+// import {
+//   Box,
+//   Button,
+//   CircularProgress,
+//   ClickAwayListener,
+//   List,
+//   ListItemButton,
+//   Paper,
+//   Popper,
+//   Stack,
+//   Typography,
+// } from '@mui/material';
+// import { useEffect, useState } from 'react';
+// import { Link as RouterLink } from 'react-router-dom';
+// import { Toast } from '../../../../arcblock/ux';
+// import { useLocaleContext } from '../../../../locale';
+// import { useSessionContext } from '../../../../session';
+// import { Dataset } from '../../api/dataset';
+// import { useNavigateTo, useNavigateWithQuery } from '../../hooks/navigate';
+// import { createDatasetState } from '../../state';
+// import Layout from '../layout';
+// import LoadingListItemButton from '../LoadingListItemButton';
+// import CollectionEditDialog from './CollectionEditDialog';
+// export function CollectionListView({ releaseId }: { releaseId: string }) {
+//   const { t } = useLocaleContext();
+//   const { session: authSession } = useSessionContext();
+//   const datasetState = createDatasetState({ releaseId })();
+//   const navigate = useNavigateWithQuery();
+//   useEffect(() => {
+//     if (!datasetState.list && authSession.user) {
+//       datasetState.reload();
+//     }
+//   }, [authSession.user]);
+//   const [editTarget, setEditTarget] = useState<Partial<Dataset>>();
+//   const createCollection = async ({ id, name, description }: { id?: string; name?: string; description?: string }) => {
+//     try {
+//       if (id) {
+//         await datasetState.updateDataset(id, { name, description });
+//         setEditTarget(undefined);
+//       } else {
+//         const dataset = await datasetState.createDataset({ name, description });
+//         setEditTarget(undefined);
+//         navigate({ page: 'collection', datasetId: dataset.id });
+//       }
+//     } catch (error) {
+//       Toast.error(error.message);
+//       console.error('create collection error', error);
+//     }
+//   };
+//   const onEdit = async (item: Dataset) => {
+//     if (!authSession.user) {
+//       await new Promise<void>((resolve) => {
+//         authSession.login(() => resolve());
+//       });
+//     }
+//     setEditTarget(item);
+//   };
+//   return (
+//     <Layout>
+//       <Stack my={2.5}>
+//         <Typography component="h1" sx={{ fontSize: 18, lineHeight: '32px', fontWeight: 500, textAlign: 'center' }}>
+//           {t('collections')}
+//         </Typography>
+//       </Stack>
+//       <CollectionsView releaseId={releaseId} onEdit={onEdit} />
+//       <CollectionEditDialog
+//         DialogProps={{ open: !!editTarget, onClose: () => setEditTarget(undefined) }}
+//         defaultValues={editTarget}
+//         onSubmit={createCollection}
+//       />
+//     </Layout>
+//   );
+// }
+// function CollectionsView({ releaseId, onEdit }: { releaseId: string; onEdit?: (dataset?: Dataset) => void }) {
+//   const { t } = useLocaleContext();
+//   const datasetState = createDatasetState({ releaseId })();
+//   const to = useNavigateTo();
+//   const [menuState, setMenuState] = useState<{
+//     anchorEl: HTMLElement;
+//     dataset: Dataset;
+//   }>();
+//   return (
+//     <>
+//       <Stack
+//         gap={1.5}
+//         sx={{
+//           userSelect: 'none',
+//           '.item': {
+//             '.item-content': {
+//               borderRadius: 1,
+//               cursor: 'pointer',
+//               display: 'flex',
+//               flexDirection: 'row',
+//               alignItems: 'center',
+//               gap: 1,
+//               pl: 2.5,
+//               pr: 1.5,
+//               boxShadow: 1,
+//               bgcolor: 'background.paper',
+//               '.item-title': {
+//                 py: 1.5,
+//               },
+//             },
+//             '.hover-visible': { display: 'none' },
+//             '&.active,:hover': {
+//               '.item-content': {
+//                 boxShadow: 2,
+//                 '.hover-visible': {
+//                   display: 'block',
+//                 },
+//               },
+//             },
+//           },
+//         }}>
+//         {!datasetState.list?.length && (
+//           <Stack alignItems="center" gap={0.5} mt="10vh" mx={3}>
+//             {datasetState.loading ? (
+//               <CircularProgress size={24} />
+//             ) : (
+//               <>
+//                 <Typography fontSize={18}>📚</Typography>
+//                 <Typography fontSize={12} sx={{ color: 'text.secondary' }}>
+//                   {t('noData', { data: t('collection') })}
+//                 </Typography>
+//               </>
+//             )}
+//           </Stack>
+//         )}
+//         {datasetState.list?.map((item) => (
+//           <Stack
+//             key={item.id}
+//             className={`item ${item.id === menuState?.dataset?.id ? 'active' : ''}`}
+//             component={RouterLink}
+//             to={to({ page: 'collection', datasetId: item.id })}>
+//             <Stack className="item-content">
+//               <Typography className="item-title" noWrap flex={1} fontSize={13} fontWeight={500}>
+//                 {item.name || t('unnamed')}
+//               </Typography>
+//               <Box className="hover-visible">
+//                 <Button
+//                   sx={{ minWidth: 28, minHeight: 28, p: 0 }}
+//                   onClick={(e) => {
+//                     e.preventDefault();
+//                     setMenuState({
+//                       anchorEl: e.currentTarget,
+//                       dataset: item,
+//                     });
+//                   }}>
+//                   <Icon icon="mdi:more-horiz" fontSize={18} />
+//                 </Button>
+//               </Box>
+//             </Stack>
+//           </Stack>
+//         ))}
+//         <Box textAlign="center">
+//           <Button onClick={() => onEdit?.({})}>{t('createObject', { object: t('collection') })}</Button>
+//         </Box>
+//       </Stack>
+//       <Popper
+//         open={Boolean(menuState)}
+//         anchorEl={menuState?.anchorEl}
+//         placement="bottom-end"
+//         sx={{ zIndex: (theme) => theme.zIndex.modal + 1 }}>
+//         <ClickAwayListener onClickAway={() => setMenuState(undefined)}>
+//           <Paper
+//             sx={{
+//               mx: 1,
+//               mt: -0.25,
+//               boxShadow: `0px 8px 16px 0px rgba(2, 7, 19, 0.08), 0px 0px 0px 1px rgba(2, 7, 19, 0.08)`,
+//             }}>
+//             <List dense sx={{ p: 0.5, '.MuiButtonBase-root': { borderRadius: 1 } }}>
+//               <ListItemButton
+//                 onClick={async () => {
+//                   if (!menuState?.dataset) return;
+//                   setMenuState(undefined);
+//                   onEdit?.(menuState.dataset);
+//                 }}>
+//                 {t('rename')}
+//               </ListItemButton>
+//               <LoadingListItemButton
+//                 sx={{ color: 'error.main' }}
+//                 onClick={async () => {
+//                   if (!menuState?.dataset) return;
+//                   await datasetState.deleteDataset(menuState.dataset.id);
+//                   setMenuState(undefined);
+//                 }}>
+//                 {t('delete')}
+//               </LoadingListItemButton>
+//             </List>
+//           </Paper>
+//         </ClickAwayListener>
+//       </Popper>
+//     </>
+//   );
+// }

package/lib/cjs/builtin/async/ai-runtime/components/collection/CollectionView.js

@@ -0,0 +1,122 @@
+"use strict";
+// import { Icon } from '@iconify/react';
+// import { Button, Stack, Typography } from '@mui/material';
+// import { useEffect, useState } from 'react';
+// import { Result, Toast } from '../../../../arcblock/ux';
+// import { useLocaleContext } from '../../../../locale';
+// import { getSessions } from '../../api/session';
+// import { useCurrentPage, useNavigateTo, useNavigateWithQuery } from '../../hooks/navigate';
+// import { createDatasetDetailState, createState } from '../../state';
+// import { parseIdentity } from '../../utils';
+// import { globalLoadingState } from '../GlobalLoading';
+// import Layout from '../layout';
+// import LoadingButton from '../LoadingButton';
+// export default function CollectionView({ releaseId }: { releaseId: string }) {
+//   const { t } = useLocaleContext();
+//   const state = createState({ releaseId })();
+//   const { datasetId } = useCurrentPage();
+//   if (!datasetId) throw new Error('Invalid datasetId');
+//   const datasetState = createDatasetDetailState({ datasetId })();
+//   const to = useNavigateTo();
+//   const navigate = useNavigateWithQuery();
+//   useEffect(() => {
+//     datasetState.reload();
+//   }, []);
+//   const startChat = async () => {
+//     try {
+//       const identity = parseIdentity(releaseId);
+//       await globalLoadingState.getState().run(async () => {
+//         const { sessions } = await getSessions(identity);
+//         const session =
+//           sessions?.find((i) => i.parameters.datasetId === datasetId) ??
+//           (await state.createSession({ name: datasetState.dataset?.name, parameters: { datasetId } }));
+//         navigate({ page: 'session', sessionId: session.id });
+//       });
+//     } catch (error) {
+//       Toast.error(error.message);
+//       console.error('create session error', error);
+//     }
+//   };
+//   const [uploading, setUploading] = useState(false);
+//   const handleUploadFile = () => {
+//     const input = document.createElement('input');
+//     input.type = 'file';
+//     input.accept = '*.pdf,*.txt,*.doc,*.docx';
+//     input.onchange = async (e) => {
+//       const files = [...e.target.files];
+//       if (!files.length) return;
+//       try {
+//         setUploading(true);
+//         await Promise.all(files.map((file) => datasetState.createDocument('file', file)));
+//       } catch (error) {
+//         Toast.error(error.message);
+//         throw error;
+//       } finally {
+//         setUploading(false);
+//       }
+//     };
+//     input.click();
+//   };
+//   if (datasetState.error) {
+//     return <Result status="error" title={datasetState.error.message} sx={{ bgcolor: 'transparent', my: 10 }} />;
+//   }
+//   return (
+//     <Layout>
+//       <Stack mt={5} mb={2.5} alignItems="flex-start">
+//         <Button
+//           sx={{ ml: -0.5 }}
+//           startIcon={<Icon icon="tabler:chevron-left" />}
+//           component={RouterLink}
+//           to={to({ page: 'collections', datasetId: undefined })}>
+//           {t('back')}
+//         </Button>
+//         <Stack
+//           width="100%"
+//           direction="row"
+//           flexWrap="wrap"
+//           py={2.5}
+//           gap={1}
+//           justifyContent="space-between"
+//           alignItems="center"
+//           borderBottom={1}
+//           borderColor="divider">
+//           <Stack>
+//             <Typography component="h1" sx={{ fontSize: 32, lineHeight: '44px', fontWeight: 700 }}>
+//               {datasetState.dataset ? datasetState.dataset.name || t('unnamed') : null}
+//             </Typography>
+//             <Typography>{datasetState.dataset?.description}</Typography>
+//           </Stack>
+//           <Stack direction="row" alignItems="center" gap={1}>
+//             <LoadingButton
+//               startIcon={<Icon icon="tabler:upload" />}
+//               variant="outlined"
+//               color="black"
+//               loading={uploading}
+//               loadingPosition="start"
+//               onClick={() => handleUploadFile()}>
+//               {t('uploadFile')}
+//             </LoadingButton>
+//             <Button
+//               startIcon={<Icon icon="tabler:plus" />}
+//               variant="outlined"
+//               color="black"
+//               onClick={() => navigate({ page: 'document', documentId: '' })}>
+//               {t('newObject', { object: t('document') })}
+//             </Button>
+//             <LoadingButton
+//               color="black"
+//               startIcon={<Icon icon="tabler:message-circle-2" />}
+//               variant="contained"
+//               onClick={startChat}>
+//               {t('chat')}
+//             </LoadingButton>
+//           </Stack>
+//         </Stack>
+//       </Stack>
+//       <DocumentListView
+//         datasetId={datasetId}
+//         onEdit={(document) => navigate({ page: 'document', documentId: document?.id || '' })}
+//       />
+//     </Layout>
+//   );
+// }

package/lib/cjs/builtin/async/ai-runtime/components/collection/DocumentListView.js

@@ -0,0 +1,152 @@
+"use strict";
+// import { Icon } from '@iconify/react';
+// import {
+//   Box,
+//   Button,
+//   CircularProgress,
+//   ClickAwayListener,
+//   Divider,
+//   Grid,
+//   List,
+//   ListItemButton,
+//   Paper,
+//   Popper,
+//   Stack,
+//   Typography,
+// } from '@mui/material';
+// import { useState } from 'react';
+// import { useLocaleContext } from '../../../../locale';
+// import { createDatasetDetailState } from '../../state';
+// import LoadingListItemButton from '../LoadingListItemButton';
+// export default function DocumentListView({
+//   datasetId,
+//   onEdit,
+// }: {
+//   datasetId: string;
+//   onEdit: (doc?: Document) => void;
+// }) {
+//   const { t } = useLocaleContext();
+//   const state = createDatasetDetailState({ datasetId })();
+//   const [menuState, setMenuState] = useState<{
+//     anchorEl: HTMLElement;
+//     item: Document;
+//   }>();
+//   return (
+//     <Stack>
+//       {!state.list?.length && (
+//         <Stack textAlign="center" alignItems="center" gap={0.5} mt="10vh" mx={3}>
+//           {state.loading ? (
+//             <CircularProgress size={24} />
+//           ) : (
+//             <>
+//               <Typography fontSize={18}>{'📄'}</Typography>
+//               <Typography fontSize={12} sx={{ color: 'text.secondary' }}>
+//                 {t('noData', { data: t('document') })}
+//               </Typography>
+//               <Button onClick={() => onEdit()}>{t('createObject', { object: t('document') })}</Button>
+//             </>
+//           )}
+//         </Stack>
+//       )}
+//       <Grid container spacing={2} pt="1px">
+//         {state.list?.map((item) => (
+//           <Grid key={item.id} item xs={6} sm={4} md={3} onClick={() => onEdit(item)}>
+//             <Box
+//               sx={{
+//                 width: '100%',
+//                 position: 'relative',
+//                 ':before': { content: '""', display: 'block', paddingBottom: '141.4%' },
+//               }}>
+//               <Paper
+//                 className={menuState?.item.id === item.id ? 'menu-active' : ''}
+//                 sx={{
+//                   position: 'absolute',
+//                   left: 0,
+//                   top: 0,
+//                   width: '100%',
+//                   height: '100%',
+//                   overflow: 'hidden',
+//                   boxShadow: 1,
+//                   display: 'flex',
+//                   flexDirection: 'column',
+//                   pb: 1,
+//                   cursor: 'pointer',
+//                   '.hover-visible': { display: 'none' },
+//                   ':hover, &.menu-active': {
+//                     boxShadow: 2,
+//                     '.hover-visible': {
+//                       display: 'flex',
+//                     },
+//                   },
+//                 }}>
+//                 <Stack direction="row" sx={{ px: 2, pt: 1.5 }}>
+//                   <Typography variant="subtitle2" noWrap sx={{ flex: 1, lineHeight: '24px', minHeight: 24 }}>
+//                     {item.name}
+//                   </Typography>
+//                   <Box className="hover-visible">
+//                     <Button
+//                       sx={{ minWidth: 24, minHeight: 24, p: 0 }}
+//                       onClick={(e) => {
+//                         e.stopPropagation();
+//                         e.preventDefault();
+//                         setMenuState({
+//                           anchorEl: e.currentTarget,
+//                           item,
+//                         });
+//                       }}>
+//                       <Icon icon="mdi:more-horiz" fontSize={18} />
+//                     </Button>
+//                   </Box>
+//                 </Stack>
+//                 <Divider sx={{ mx: 2, my: 1 }} />
+//                 <Typography
+//                   sx={{
+//                     flex: 1,
+//                     px: 2,
+//                     overflow: 'hidden',
+//                     wordBreak: 'break-word',
+//                     fontSize: 10,
+//                     lineHeight: '16px',
+//                   }}>
+//                   {item.content}
+//                 </Typography>
+//               </Paper>
+//             </Box>
+//           </Grid>
+//         ))}
+//       </Grid>
+//       <Popper
+//         open={Boolean(menuState)}
+//         anchorEl={menuState?.anchorEl}
+//         placement="bottom-start"
+//         sx={{ zIndex: (theme) => theme.zIndex.modal + 1 }}>
+//         <ClickAwayListener onClickAway={() => setMenuState(undefined)}>
+//           <Paper
+//             sx={{
+//               boxShadow: `0px 8px 16px 0px rgba(2, 7, 19, 0.08), 0px 0px 0px 1px rgba(2, 7, 19, 0.08)`,
+//             }}>
+//             <List dense sx={{ p: 0.5, '.MuiButtonBase-root': { borderRadius: 1 } }}>
+//               <ListItemButton
+//                 onClick={async () => {
+//                   if (!menuState?.item) return;
+//                   onEdit(menuState.item);
+//                   setMenuState(undefined);
+//                 }}>
+//                 {t('edit')}
+//               </ListItemButton>
+//               <LoadingListItemButton
+//                 sx={{ color: 'error.main' }}
+//                 onClick={async () => {
+//                   if (!menuState?.item) return;
+//                   await state.deleteDocument(menuState.item.id);
+//                   setMenuState(undefined);
+//                 }}>
+//                 {t('delete')}
+//               </LoadingListItemButton>
+//             </List>
+//           </Paper>
+//         </ClickAwayListener>
+//       </Popper>
+//     </Stack>
+//   );
+// }