langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 20:15:31 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

Log interface in Chatflow mode Click on a new entry "Conversation details" Always keep the log of the original clicked entry #5075

New Issue
Closed
opened 2026-02-21 18:09:15 -05:00 by yindo · 1 comment
yindo commented 2026-02-21 18:09:15 -05:00
Owner
Copy Link
Copy Source

Originally created by @JiangYain on GitHub (Aug 16, 2024).

Originally assigned to: @crazywoola on GitHub.

Self Checks

  • This is only for bug report, if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
  • [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
  • Please do not modify this template :) and fill in all the required fields.

Dify version

0.6.15

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Upon initially clicking on a log entry, the log is displayed correctly.
image

After clicking on a new entry, the original log remains displayed.
image

Attempted to change the system language setting to English, but the bug persists.

✔️ Expected Behavior

The expectation is for the conversation log to remain consistent with the currently selected entry.

❌ Actual Behavior

The conversation log consistently remains at the entry that was initially clicked.

Originally created by @JiangYain on GitHub (Aug 16, 2024). Originally assigned to: @crazywoola on GitHub. ### Self Checks - [X] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [X] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [X] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:） - [X] Please do not modify this template :) and fill in all the required fields. ### Dify version 0.6.15 ### Cloud or Self Hosted Self Hosted (Docker) ### Steps to reproduce Upon initially clicking on a log entry, the log is displayed correctly. ![image](https://github.com/user-attachments/assets/4e98efa1-64e6-4b9a-bc25-9e2b92384b6b) After clicking on a new entry, the original log remains displayed. ![image](https://github.com/user-attachments/assets/ce639c7c-d82b-4f58-83f9-4fdcde6e442f) Attempted to change the system language setting to English, but the bug persists. ### ✔️ Expected Behavior The expectation is for the conversation log to remain consistent with the currently selected entry. ### ❌ Actual Behavior The conversation log consistently remains at the entry that was initially clicked.
yindo added the 🐞 bug label 2026-02-21 18:09:15 -05:00
yindo closed this issue 2026-02-21 18:09:15 -05:00
yindo commented 2026-02-21 18:09:16 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Aug 16, 2024):

Hello @JiangYain! 👋 I'm here to help you with bug fixes, answer questions, and guide you to become a contributor. Let's tackle this issue together!

The issue you're experiencing seems to be related to the state management of the selected log entry in the Chatflow mode. When a new log entry is clicked, the system should update the state to reflect the newly selected entry, but it appears to be retaining the original entry instead.

The current implementation uses state variables to manage the selected log entry and the visibility of the drawer. When a log entry is clicked, the state should be updated to show the drawer and set the current conversation to the newly selected log entry. Here is the relevant code snippet:

const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh }) => {
  const { t } = useTranslation()
  const { formatTime } = useTimestamp()
  const media = useBreakpoints()
  const isMobile = media === MediaType.mobile

  const [showDrawer, setShowDrawer] = useState(false)
  const [currentConversation, setCurrentConversation] = useState<any>(null)

  return (
    <div className='overflow-x-auto'>
      <table className={`w-full min-w-[440px] border-collapse border-0 text-sm mt-3 ${s.logTable}`}>
        <thead className="h-8 leading-8 border-b border-gray-200 text-gray-500 font-bold">
          <tr>
            <td className='w-[1.375rem] whitespace-nowrap'></td>
            <td className='whitespace-nowrap'>{t('appLog.table.header.time')}</td>
            <td className='whitespace-nowrap'>{t('appLog.table.header.endUser')}</td>
            <td className='whitespace-nowrap'>{isChatMode ? t('appLog.table.header.summary') : t('appLog.table.header.input')}</td>
            <td className='whitespace-nowrap'>{isChatMode ? t('appLog.table.header.messageCount') : t('appLog.table.header.output')}</td>
            <td className='whitespace-nowrap'>{t('appLog.table.header.userRate')}</td>
            <td className='whitespace-nowrap'>{t('appLog.table.header.adminRate')}</td>
          </tr>
        </thead>
        <tbody className="text-gray-500">
          {logs.data.map((log: any) => {
            const endUser = log.from_end_user_session_id
            const leftValue = get(log, isChatMode ? 'name' : 'message.inputs.query') || (!isChatMode ? (get(log, 'message.query') || get(log, 'message.inputs.default_input')) : '') || ''
            const rightValue = get(log, isChatMode ? 'message_count' : 'message.answer')
            return <tr
              key={log.id}
              className={`border-b border-gray-200 h-8 hover:bg-gray-50 cursor-pointer ${currentConversation?.id !== log.id ? '' : 'bg-gray-50'}`}
              onClick={() => {
                setShowDrawer(true)
                setCurrentConversation(log)
              }}>
              <td className='text-center align-middle'>{!log.read_at && <span className='inline-block bg-[#3F83F8] h-1.5 w-1.5 rounded'></span>}</td>
              <td className='w-[160px]'>{formatTime(log.created_at, t('appLog.dateTimeFormat') as string)}</td>
              <td>{renderTdValue(endUser || defaultValue, !endUser)}</td>
              <td style={{ maxWidth: isChatMode ? 300 : 200 }}>
                {renderTdValue(leftValue || t('appLog.table.empty.noChat'), !leftValue, isChatMode && log.annotated)}
              </td>
              <td style={{ maxWidth: isChatMode ? 100 : 200 }}>
                {renderTdValue(rightValue === 0 ? 0 : (rightValue || t('appLog.table.empty.noOutput')), !rightValue, !isChatMode && !!log.annotation?.content, log.annotation)}
              </td>
              <td>
                {(!log.user_feedback_stats.like && !log.user_feedback_stats.dislike)
                  ? renderTdValue(defaultValue, true)
                  : <>
                    {!!log.user_feedback_stats.like && <HandThumbIconWithCount iconType='up' count={log.user_feedback_stats.like} />}
                    {!!log.user_feedback_stats.dislike && <HandThumbIconWithCount iconType='down' count={log.user_feedback_stats.dislike} />}
                  </>
                }
              </td>
              <td>
                {(!log.admin_feedback_stats.like && !log.admin_feedback_stats.dislike)
                  ? renderTdValue(defaultValue, true)
                  : <>
                    {!!log.admin_feedback_stats.like && <HandThumbIconWithCount iconType='up' count={log.admin_feedback_stats.like} />}
                    {!!log.admin_feedback_stats.dislike && <HandThumbIconWithCount iconType='down' count={log.admin_feedback_stats.dislike} />}
                  </>
                }
              </td>
            </tr>
          })}
        </tbody>
      </table>
      <Drawer
        isOpen={showDrawer}
        onClose={onCloseDrawer}
        mask={isMobile}
        footer={null}
        panelClassname='mt-16 mx-2 sm:mr-2 mb-4 !p-0 !max-w-[640px] rounded-xl'
      >
        <DrawerContext.Provider value={{
          onClose: onCloseDrawer,
          appDetail,
        }}>
          {isChatMode
            ? <ChatConversationDetailComp appId={appDetail.id} conversationId={currentConversation?.id} />
            : <CompletionConversationDetailComp appId={appDetail.id} conversationId={currentConversation?.id} />
          }
        </DrawerContext.Provider>
      </Drawer>
    </div>
  )
}

Ensure that the setCurrentConversation function is correctly updating the state with the newly selected log entry. If the issue persists, you may need to debug further to identify why the state is not being updated as expected [1].

To continue talking to Dosu, mention @dosu.

@dosubot[bot] commented on GitHub (Aug 16, 2024): <!-- Greeting --> Hello @JiangYain! 👋 I'm here to help you with bug fixes, answer questions, and guide you to become a contributor. Let's tackle this issue together! <!-- Answer --> The issue you're experiencing seems to be related to the state management of the selected log entry in the Chatflow mode. When a new log entry is clicked, the system should update the state to reflect the newly selected entry, but it appears to be retaining the original entry instead. The current implementation uses state variables to manage the selected log entry and the visibility of the drawer. When a log entry is clicked, the state should be updated to show the drawer and set the current conversation to the newly selected log entry. Here is the relevant code snippet: ```tsx const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh }) => { const { t } = useTranslation() const { formatTime } = useTimestamp() const media = useBreakpoints() const isMobile = media === MediaType.mobile const [showDrawer, setShowDrawer] = useState(false) const [currentConversation, setCurrentConversation] = useState<any>(null) return ( <div className='overflow-x-auto'> <table className={`w-full min-w-[440px] border-collapse border-0 text-sm mt-3 ${s.logTable}`}> <thead className="h-8 leading-8 border-b border-gray-200 text-gray-500 font-bold"> <tr> <td className='w-[1.375rem] whitespace-nowrap'></td> <td className='whitespace-nowrap'>{t('appLog.table.header.time')}</td> <td className='whitespace-nowrap'>{t('appLog.table.header.endUser')}</td> <td className='whitespace-nowrap'>{isChatMode ? t('appLog.table.header.summary') : t('appLog.table.header.input')}</td> <td className='whitespace-nowrap'>{isChatMode ? t('appLog.table.header.messageCount') : t('appLog.table.header.output')}</td> <td className='whitespace-nowrap'>{t('appLog.table.header.userRate')}</td> <td className='whitespace-nowrap'>{t('appLog.table.header.adminRate')}</td> </tr> </thead> <tbody className="text-gray-500"> {logs.data.map((log: any) => { const endUser = log.from_end_user_session_id const leftValue = get(log, isChatMode ? 'name' : 'message.inputs.query') || (!isChatMode ? (get(log, 'message.query') || get(log, 'message.inputs.default_input')) : '') || '' const rightValue = get(log, isChatMode ? 'message_count' : 'message.answer') return <tr key={log.id} className={`border-b border-gray-200 h-8 hover:bg-gray-50 cursor-pointer ${currentConversation?.id !== log.id ? '' : 'bg-gray-50'}`} onClick={() => { setShowDrawer(true) setCurrentConversation(log) }}> <td className='text-center align-middle'>{!log.read_at && <span className='inline-block bg-[#3F83F8] h-1.5 w-1.5 rounded'></span>}</td> <td className='w-[160px]'>{formatTime(log.created_at, t('appLog.dateTimeFormat') as string)}</td> <td>{renderTdValue(endUser || defaultValue, !endUser)}</td> <td style={{ maxWidth: isChatMode ? 300 : 200 }}> {renderTdValue(leftValue || t('appLog.table.empty.noChat'), !leftValue, isChatMode && log.annotated)} </td> <td style={{ maxWidth: isChatMode ? 100 : 200 }}> {renderTdValue(rightValue === 0 ? 0 : (rightValue || t('appLog.table.empty.noOutput')), !rightValue, !isChatMode && !!log.annotation?.content, log.annotation)} </td> <td> {(!log.user_feedback_stats.like && !log.user_feedback_stats.dislike) ? renderTdValue(defaultValue, true) : <> {!!log.user_feedback_stats.like && <HandThumbIconWithCount iconType='up' count={log.user_feedback_stats.like} />} {!!log.user_feedback_stats.dislike && <HandThumbIconWithCount iconType='down' count={log.user_feedback_stats.dislike} />} </> } </td> <td> {(!log.admin_feedback_stats.like && !log.admin_feedback_stats.dislike) ? renderTdValue(defaultValue, true) : <> {!!log.admin_feedback_stats.like && <HandThumbIconWithCount iconType='up' count={log.admin_feedback_stats.like} />} {!!log.admin_feedback_stats.dislike && <HandThumbIconWithCount iconType='down' count={log.admin_feedback_stats.dislike} />} </> } </td> </tr> })} </tbody> </table> <Drawer isOpen={showDrawer} onClose={onCloseDrawer} mask={isMobile} footer={null} panelClassname='mt-16 mx-2 sm:mr-2 mb-4 !p-0 !max-w-[640px] rounded-xl' > <DrawerContext.Provider value={{ onClose: onCloseDrawer, appDetail, }}> {isChatMode ? <ChatConversationDetailComp appId={appDetail.id} conversationId={currentConversation?.id} /> : <CompletionConversationDetailComp appId={appDetail.id} conversationId={currentConversation?.id} /> } </DrawerContext.Provider> </Drawer> </div> ) } ``` Ensure that the `setCurrentConversation` function is correctly updating the state with the newly selected log entry. If the issue persists, you may need to debug further to identify why the state is not being updated as expected <sup>[[1]](https://github.com/langgenius/dify/blob/main/web/app/components/app/log/list.tsx)</sup>. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label 🐞 bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#5075
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?