Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add new session button for the internal chat box #3780

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

feat: add new session button for the internal chat box #3780

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
aaa1fad
feat: add new session btn
khiemfle Dec 27, 2024
dbf1fe2
chore: update
khiemfle Dec 27, 2024
2bbcd96
chore: update
khiemfle Dec 28, 2024
4b4cb39
chore: update
khiemfle Dec 28, 2024
1af5367
chore: update
khiemfle Dec 31, 2024
578d772
chore: always shown the new session button
khiemfle Dec 31, 2024
45f7d5a
chore: always shown the new session button
khiemfle Dec 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 49 additions & 3 deletions packages/ui/src/views/chatmessage/ChatMessage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ import {
IconDeviceSdCard,
IconCheck,
IconPaperclip,
IconSparkles
IconSparkles,
IconRefresh
} from '@tabler/icons-react'
import robotPNG from '@/assets/images/robot.png'
import userPNG from '@/assets/images/account.png'
Expand Down Expand Up @@ -167,6 +168,22 @@ export const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, preview

const dispatch = useDispatch()

// Add resetChat function here, after initial declarations
const resetChat = useCallback(() => {
const newChatId = uuidv4()
setChatId(newChatId)
setMessages([
{
message: 'Hi there! How can I help?',
type: 'apiMessage'
}
])
setUserInput('')
setUploadedFiles([])
setPreviews([])
setLocalStorageChatflow(chatflowid, newChatId)
}, [chatflowid, setPreviews])

useNotifier()
const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
Expand Down Expand Up @@ -1018,9 +1035,13 @@ export const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, preview
// Get chatmessages successful
useEffect(() => {
if (getChatmessageApi.data?.length) {
const chatId = getChatmessageApi.data[0]?.chatId
const latestMessage = getChatmessageApi.data[getChatmessageApi.data.length - 1]
const chatId = latestMessage?.chatId
setChatId(chatId)
const loadedMessages = getChatmessageApi.data.map((message) => {
// Filter messages to only include those with matching chatId
const messagesForChat = getChatmessageApi.data.filter((message) => message.chatId === chatId)

const loadedMessages = messagesForChat.map((message) => {
const obj = {
id: message.id,
message: message.content,
Expand Down Expand Up @@ -1538,6 +1559,31 @@ export const ChatMessage = ({ open, chatflowid, isAgentCanvas, isDialog, preview
)}
<div ref={ps} className={`${isDialog ? 'cloud-dialog' : 'cloud'}`}>
<div id='messagelist' className={'messagelist'}>
{/* New Session Button - Fixed position at the top of chat */}
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'flex-end',
p: 1,
position: 'sticky',
top: 0,
backgroundColor: theme.palette.background.paper,
zIndex: 1000,
borderBottom: `1px solid ${theme.palette.divider}`
}}
>
<Button
onClick={resetChat}
startIcon={<IconRefresh size={20} />}
variant='outlined'
color='primary'
size='small'
sx={{ borderRadius: '20px' }}
>
New Session
</Button>
</Box>
{messages &&
messages.map((message, index) => {
return (
Expand Down