Implementation:Langgenius Dify Use Log

Knowledge Sources	Langgenius_Dify
Domains	Frontend, API_Service
Last Updated	2026-02-12 07:00 GMT

Overview

React Query hooks for fetching application logs including annotations counts, chat conversations, completion conversations, conversation details, workflow logs, and workflow pause details.

Description

use-log.ts provides React Query hooks for the Dify Logs feature, which displays conversation and workflow execution history for applications. The module exports seven hooks organized by log type: useAnnotationsCount fetches the total count of annotations for an app via GET /apps/{appId}/annotations/count; useChatConversations fetches paginated chat conversation logs with optional filter parameters; useCompletionConversations fetches paginated completion conversation logs; useChatConversationDetail fetches the full detail of a specific chat conversation including all messages; useCompletionConversationDetail fetches the full detail of a specific completion conversation; useWorkflowLogs fetches paginated workflow execution logs with filter parameters; and useWorkflowPausedDetails fetches details about a paused workflow run. All hooks are conditionally enabled based on required parameters (appId, conversationId, workflowRunId) to prevent unnecessary requests. Query keys are namespaced under "log" and include the relevant parameters for cache granularity.

Usage

Use these hooks in log viewer components, conversation detail panels, and workflow execution history views. Each hook accepts the required identifiers and optional parameters for filtering and pagination.

Code Reference

Source Location

• Repository: Langgenius_Dify
• File: web/service/use-log.ts
• Lines: 1-105

Signature

export const useAnnotationsCount = (
  appId: string
) => UseQueryResult<AnnotationsCountResponse>

export const useChatConversations = (
  params: { appId: string, params?: Partial<ChatConversationsRequest> }
) => UseQueryResult<ChatConversationsResponse>

export const useCompletionConversations = (
  params: { appId: string, params?: Partial<CompletionConversationsRequest> }
) => UseQueryResult<CompletionConversationsResponse>

export const useChatConversationDetail = (
  appId?: string,
  conversationId?: string
) => UseQueryResult<ChatConversationFullDetailResponse>

export const useCompletionConversationDetail = (
  appId?: string,
  conversationId?: string
) => UseQueryResult<CompletionConversationFullDetailResponse>

export const useWorkflowLogs = (
  params: { appId: string, params?: Record<string, string | number | boolean | undefined> }
) => UseQueryResult<WorkflowLogsResponse>

export const useWorkflowPausedDetails = (
  params: { workflowRunId: string, enabled?: boolean }
) => UseQueryResult<WorkflowPausedDetailsResponse>

Import

import {
  useAnnotationsCount,
  useChatConversations,
  useCompletionConversations,
  useChatConversationDetail,
  useCompletionConversationDetail,
  useWorkflowLogs,
  useWorkflowPausedDetails,
} from '@/service/use-log'

I/O Contract

Inputs

Name	Type	Required	Description
appId	string	Yes	Application ID for scoping log queries
params	Partial<ChatConversationsRequest>	No	Pagination and filter parameters (page, limit, keyword, etc.)
conversationId	string	Varies	Specific conversation ID for detail queries; enables the query when provided
workflowRunId	string	Yes (useWorkflowPausedDetails)	Workflow run ID for pause detail queries
enabled	boolean	No	Explicit control over whether the workflow paused details query is active

Outputs

Name	Type	Description
AnnotationsCountResponse	AnnotationsCountResponse	Total count of annotations for the app
ChatConversationsResponse	ChatConversationsResponse	Paginated list of chat conversations with metadata
CompletionConversationsResponse	CompletionConversationsResponse	Paginated list of completion conversations
ChatConversationFullDetailResponse	ChatConversationFullDetailResponse	Full chat conversation detail including all messages
CompletionConversationFullDetailResponse	CompletionConversationFullDetailResponse	Full completion conversation detail
WorkflowLogsResponse	WorkflowLogsResponse	Paginated list of workflow execution logs
WorkflowPausedDetailsResponse	WorkflowPausedDetailsResponse	Details of a paused workflow run

Usage Examples

Chat Conversation Logs

import { useChatConversations } from '@/service/use-log'

function ChatLogList({ appId }: { appId: string }) {
  const { data, isLoading } = useChatConversations({
    appId,
    params: { page: 1, limit: 20 },
  })

  if (isLoading) return <Spinner />

  return (
    <ul>
      {data?.data.map(conv => (
        <li key={conv.id}>{conv.name}</li>
      ))}
    </ul>
  )
}

Workflow Execution Logs

import { useWorkflowLogs } from '@/service/use-log'

function WorkflowLogList({ appId }: { appId: string }) {
  const { data } = useWorkflowLogs({
    appId,
    params: { page: 1, limit: 20 },
  })

  return (
    <table>
      {data?.data.map(log => (
        <tr key={log.id}>
          <td>{log.status}</td>
          <td>{log.elapsed_time}ms</td>
        </tr>
      ))}
    </table>
  )
}

Conversation Detail

import { useChatConversationDetail } from '@/service/use-log'

function ConversationDetail({ appId, conversationId }: { appId: string, conversationId: string }) {
  const { data } = useChatConversationDetail(appId, conversationId)

  return (
    <div>
      <h2>{data?.name}</h2>
      <p>Messages: {data?.message_count}</p>
    </div>
  )
}

Related Pages

• Principle:Langgenius_Dify_React_Query_Pattern
• Langgenius_Dify_Service_Base - HTTP GET wrapper used by all query functions
• Langgenius_Dify_Service_Annotation - Annotation service functions for related data