feat: chat session configure window

src/devtools/App.tsx

@@ -14,6 +14,7 @@ import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import ChatIcon from '@mui/icons-material/Chat';
 import useStore, { openLink } from './store'
 import SettingWindow from './SettingWindow'
+import ChatConfigWindow from './ChatConfigWindow'
 import ChatBubbleOutlineOutlinedIcon from '@mui/icons-material/ChatBubbleOutlineOutlined';
 import SettingsIcon from '@mui/icons-material/Settings';
 import AddIcon from '@mui/icons-material/Add';
@@ -41,6 +42,8 @@ function App() {
         }
     }, [store.needSetting])
 
+    const [configureChatConfig, setConfigureChatConfig] = React.useState<Session | null>(null);
+
     const generate = async (msgs: Message[]) => {
         const msg = createMessage('assistant', '...')
         const newMessages = [...msgs, msg]
@@ -142,7 +145,7 @@ function App() {
                                             newSession.messages = session.messages
                                             store.createChatSession(newSession, ix)
                                         }}
-                                        updateMe={(updated) => store.updateChatSession(updated)}
+                                        editMe={() => setConfigureChatConfig(session)}
                                     />
                                 ))
                             }
@@ -308,6 +311,18 @@ function App() {
                     }}
                     close={() => setOpenSettingWindow(false)}
                 />
+                {
+                    configureChatConfig !== null && (
+                        <ChatConfigWindow open={configureChatConfig !== null}
+                            session={configureChatConfig}
+                            save={(session) => {
+                                store.updateChatSession(session)
+                                setConfigureChatConfig(null)
+                            }}
+                            close={() => setConfigureChatConfig(null)}
+                        />
+                    )
+                }
             </Grid>
         </Box >
     );

src/devtools/ChatConfigWindow.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import './App.css';
+import {
+    Button, Dialog, DialogContent, DialogActions, DialogTitle, DialogContentText, TextField,
+} from '@mui/material';
+import { Session } from './types'
+
+const { useEffect } = React
+
+interface Props {
+    open: boolean
+    session: Session
+    save(session: Session): void
+    close(): void
+}
+
+export default function ChatConfigWindow(props: Props) {
+    const [dataEdit, setDataEdit] = React.useState<Session>(props.session);
+
+    useEffect(() => {
+        setDataEdit(props.session)
+    }, [props.session])
+
+    const onCancel = () => {
+        props.close()
+        setDataEdit(props.session)
+    }
+
+    const onSave = () => {
+        if (dataEdit.name === '') {
+            dataEdit.name = props.session.name
+        }
+        props.save(dataEdit)
+        props.close()
+    }
+
+    return (
+        <Dialog open={props.open} onClose={onCancel}>
+            <DialogTitle>Chat Config</DialogTitle>
+            <DialogContent>
+                <DialogContentText>
+                </DialogContentText>
+                <TextField
+                    autoFocus
+                    margin="dense"
+                    label="Chat Title"
+                    type="text"
+                    fullWidth
+                    variant="outlined"
+                    value={dataEdit.name}
+                    onChange={(e) => setDataEdit({ ...dataEdit, name: e.target.value.trim() })}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onCancel}>Cancel</Button>
+                <Button onClick={onSave}>Save</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

src/devtools/SessionItem.tsx

@@ -23,13 +23,11 @@ export interface Props {
     switchMe: () => void
     deleteMe: () => void
     copyMe: () => void
-    updateMe: (session: Session) => void
+    editMe: () => void
 }
 
 export default function SessionItem(props: Props) {
-    const { session, selected, switchMe, deleteMe, copyMe, updateMe } = props
-    const [editMode, setEditMode] = useState(false)
-    const [nameEdit, setNameEdit] = useState(session.name)
+    const { session, selected, switchMe, deleteMe, copyMe, editMe } = props
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const open = Boolean(anchorEl);
     const handleClick = (event: React.MouseEvent<HTMLElement>) => {
@@ -39,108 +37,61 @@ export default function SessionItem(props: Props) {
     const handleClose = () => {
         setAnchorEl(null);
     };
-    const saveNameEdit = () => {
-        handleClose()
-        updateMe({ ...session, name: nameEdit })
-        setEditMode(false)
-    }
-
-    const inputEl = useRef(null)
-    useEffect(() => {
-        if (editMode) {
-            inputEl.current.focus()
-        }
-    }, [editMode])
 
     return (
         <MenuItem
             key={session.id}
             selected={selected}
-            onClick={() => {
-                if (!editMode) {
-                    switchMe()
-                }
-            }}
+            onClick={() => switchMe()}
         >
             <ListItemIcon>
                 <IconButton><ChatBubbleOutlineOutlinedIcon fontSize="small" /></IconButton>
             </ListItemIcon>
             <ListItemText>
-                {
-
-                    editMode ? (
-                        <form onSubmit={(event) => {
-                            event.preventDefault()
-                            saveNameEdit()
-                        }}>
-                        <TextField variant="standard" value={nameEdit} inputRef={inputEl}
-                            onChange={(e) => {
-                                e.preventDefault()
-                                setNameEdit(e.target.value)
-                            }}
-                        />
-                        </form>
-                    ) : (
-                        <Typography variant="inherit" noWrap>
-                            {session.name}
-                        </Typography>
-                    )
-                }
+                <Typography variant="inherit" noWrap>
+                    {session.name}
+                </Typography>
             </ListItemText>
-            {
-                editMode ? (
-                    <>
-                        <IconButton onClick={saveNameEdit}>
-                            <CheckIcon />
-                        </IconButton>
-                    </>
-                ) : (
-                    <>
-                        <IconButton
-                            onClick={handleClick}
-                        >
-                            <MoreHorizOutlinedIcon />
-                        </IconButton>
-                        <StyledMenu
-                            MenuListProps={{
-                                'aria-labelledby': 'long-button',
-                            }}
-                            anchorEl={anchorEl}
-                            open={open}
-                            onClose={handleClose}
-                        >
-                            <MenuItem key={session.id + 'edit'} onClick={() => {
-                                setEditMode(true)
-                            }} disableRipple
-                            >
-                                <EditIcon />
-                                Rename
-                            </MenuItem>
+            <IconButton onClick={handleClick}>
+                <MoreHorizOutlinedIcon />
+            </IconButton>
+            <StyledMenu
+                MenuListProps={{
+                    'aria-labelledby': 'long-button',
+                }}
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+            >
+                <MenuItem key={session.id + 'edit'} onClick={() => {
+                    editMe()
+                    handleClose()
+                }} disableRipple>
+                    <EditIcon />
+                    Rename
+                </MenuItem>
 
-                            <MenuItem key={session.id + 'copy'} onClick={() => {
-                                copyMe()
-                            }} disableRipple
-                            >
-                                <FileCopyIcon fontSize='small' />
-                                Copy
-                            </MenuItem>
+                <MenuItem key={session.id + 'copy'} onClick={() => {
+                    copyMe()
+                    handleClose()
+                }} disableRipple>
+                    <FileCopyIcon fontSize='small' />
+                    Copy
+                </MenuItem>
 
-                            <Divider sx={{ my: 0.5 }} />
+                <Divider sx={{ my: 0.5 }} />
 
-                            <MenuItem key={session.id + 'del'} onClick={() => {
-                                setAnchorEl(null)
-                                handleClose()
-                                deleteMe()
-                            }} disableRipple
-                            >
-                                <DeleteForeverIcon />
-                                Delete
-                            </MenuItem>
+                <MenuItem key={session.id + 'del'} onClick={() => {
+                    setAnchorEl(null)
+                    handleClose()
+                    deleteMe()
+                }} disableRipple
+                >
+                    <DeleteForeverIcon />
+                    Delete
+                </MenuItem>
 
-                        </StyledMenu>
-                    </>
-                )
-            }
+            </StyledMenu>
         </MenuItem>
     )
 }