diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx index dbae6fb3a63..736848f1143 100644 --- a/web/app/components/app/log/list.tsx +++ b/web/app/components/app/log/list.tsx @@ -39,7 +39,6 @@ import { parseAsString, useQueryState } from 'nuqs' import * as React from 'react' import { useCallback, useEffect, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' -import { createContext, useContext } from 'use-context-selector' import { useShallow } from 'zustand/react/shallow' import ModelInfo from '@/app/components/app/log/model-info' import { useStore as useAppStore } from '@/app/components/app/store' @@ -94,11 +93,6 @@ type IConversationList = { const defaultValue = 'N/A' -type IDrawerContext = { - onClose: () => void - appDetail?: App -} - type StatusCount = { paused: number success: number @@ -106,8 +100,6 @@ type StatusCount = { partial_success: number } -const DrawerContext = createContext({} as IDrawerContext) - /** * Icon component with numbers */ @@ -164,12 +156,14 @@ const statusTdRender = (statusCount: StatusCount) => { } type IDetailPanel = { + appDetail: App detail: any + onClose: () => void onFeedback: FeedbackFunc onSubmitAnnotation: SubmitAnnotationFunc } -function DetailPanel({ detail, onFeedback }: IDetailPanel) { +function DetailPanel({ appDetail, detail, onClose, onFeedback }: IDetailPanel) { const MIN_ITEMS_FOR_SCROLL_LOADING = 8 const SCROLL_DEBOUNCE_MS = 200 const { data: timezone } = useQuery({ @@ -177,7 +171,6 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) { select: (data) => data.profile.timezone ?? undefined, }) const { formatTime } = useTimestamp() - const { onClose, appDetail } = useContext(DrawerContext) const { currentLogItem, setCurrentLogItem, @@ -239,7 +232,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) { if (oldestAnswerIdRef.current) params.first_id = oldestAnswerIdRef.current const messageRes = await fetchChatMessages({ - url: `/apps/${appDetail?.id}/chat-messages`, + url: `/apps/${appDetail.id}/chat-messages`, params, }) @@ -311,7 +304,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) { try { if (annotation?.id) { const { delAnnotation } = await import('@/service/annotation') - await delAnnotation(appDetail?.id || '', annotation.id) + await delAnnotation(appDetail.id, annotation.id) } setAllChatItems(applyAnnotationRemoved(allChatItems, index)) @@ -323,7 +316,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) { return false } }, - [allChatItems, appDetail?.id, t], + [allChatItems, appDetail.id, t], ) const fetchInitiated = useRef(false) @@ -331,9 +324,9 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) { // Only load initial messages, don't auto-load more useEffect(() => { if ( - appDetail?.id && + appDetail.id && detail.id && - appDetail?.mode !== AppModeEnum.COMPLETION && + appDetail.mode !== AppModeEnum.COMPLETION && !fetchInitiated.current ) { // Mark as initialized, but don't auto-load more messages @@ -341,12 +334,12 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) { // Still call fetchData to get initial messages fetchData() } - }, [appDetail?.id, detail.id, appDetail?.mode, fetchData]) + }, [appDetail.id, detail.id, appDetail.mode, fetchData]) const [isLoading, setIsLoading] = useState(false) const loadMoreMessages = useCallback(async () => { - if (isLoading || !hasMore || !appDetail?.id || !detail.id) return + if (isLoading || !hasMore || !appDetail.id || !detail.id) return // Throttle using ref to persist across re-renders const now = Date.now() @@ -429,8 +422,8 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) { } }, [hasMore, isLoading, loadMoreMessages]) - const isChatMode = appDetail?.mode !== AppModeEnum.COMPLETION - const isAdvanced = appDetail?.mode === AppModeEnum.ADVANCED_CHAT + const isChatMode = appDetail.mode !== AppModeEnum.COMPLETION + const isAdvanced = appDetail.mode === AppModeEnum.ADVANCED_CHAT const shouldShowPromptLogModal = showPromptLogModal && !!currentLogItem?.log const varList = getDetailVarList(detail, varValues) @@ -532,7 +525,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) { void +} + /** * Text App Conversation Detail Component */ -const CompletionConversationDetailComp: FC<{ appId?: string; conversationId?: string }> = ({ - appId, +const CompletionConversationDetailComp: FC = ({ + appDetail, conversationId, + onClose, }) => { // Text Generator App Session Details Including Message List const { data: conversationDetail, refetch: conversationDetailMutate } = - useCompletionConversationDetail(appId, conversationId) + useCompletionConversationDetail(appDetail.id, conversationId) const { t } = useTranslation() const handleFeedback = async ( @@ -666,7 +666,7 @@ const CompletionConversationDetailComp: FC<{ appId?: string; conversationId?: st ): Promise => { try { await updateLogMessageFeedbacks({ - url: `/apps/${appId}/feedbacks`, + url: `/apps/${appDetail.id}/feedbacks`, body: { message_id: mid, rating, content: content ?? undefined }, }) conversationDetailMutate() @@ -681,7 +681,7 @@ const CompletionConversationDetailComp: FC<{ appId?: string; conversationId?: st const handleAnnotation = async (mid: string, value: string): Promise => { try { await updateLogMessageAnnotations({ - url: `/apps/${appId}/annotations`, + url: `/apps/${appDetail.id}/annotations`, body: { message_id: mid, content: value }, }) conversationDetailMutate() @@ -697,7 +697,9 @@ const CompletionConversationDetailComp: FC<{ appId?: string; conversationId?: st return ( @@ -707,11 +709,12 @@ const CompletionConversationDetailComp: FC<{ appId?: string; conversationId?: st /** * Chat App Conversation Detail Component */ -const ChatConversationDetailComp: FC<{ appId?: string; conversationId?: string }> = ({ - appId, +const ChatConversationDetailComp: FC = ({ + appDetail, conversationId, + onClose, }) => { - const { data: conversationDetail } = useChatConversationDetail(appId, conversationId) + const { data: conversationDetail } = useChatConversationDetail(appDetail.id, conversationId) const { t } = useTranslation() const handleFeedback = async ( @@ -720,7 +723,7 @@ const ChatConversationDetailComp: FC<{ appId?: string; conversationId?: string } ): Promise => { try { await updateLogMessageFeedbacks({ - url: `/apps/${appId}/feedbacks`, + url: `/apps/${appDetail.id}/feedbacks`, body: { message_id: mid, rating, content: content ?? undefined }, }) toast.success(t(($) => $['actionMsg.modifiedSuccessfully'], { ns: 'common' })) @@ -734,7 +737,7 @@ const ChatConversationDetailComp: FC<{ appId?: string; conversationId?: string } const handleAnnotation = async (mid: string, value: string): Promise => { try { await updateLogMessageAnnotations({ - url: `/apps/${appId}/annotations`, + url: `/apps/${appDetail.id}/annotations`, body: { message_id: mid, content: value }, }) toast.success(t(($) => $['actionMsg.modifiedSuccessfully'], { ns: 'common' })) @@ -749,7 +752,9 @@ const ChatConversationDetailComp: FC<{ appId?: string; conversationId?: string } return ( @@ -1054,24 +1059,19 @@ const ConversationList: FC = ({ logs, appDetail, onRefresh }) - - {isChatMode ? ( - - ) : ( - - )} - + {isChatMode ? ( + + ) : ( + + )}