dify/web/features/agent-v2/agent-detail/logs/components/source-picker.tsx

import type {
  AgentLogSourceGroupResponse,
  AgentLogSourceResponse,
} from '@dify/contracts/api/console/agent/types.gen'
import type { TFunction } from 'i18next'
import type { ReactNode } from 'react'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import {
  Combobox,
  ComboboxCollection,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxGroupLabel,
  ComboboxInput,
  ComboboxInputGroup,
  ComboboxItem,
  ComboboxItemText,
  ComboboxList,
  ComboboxTrigger,
  ComboboxValue,
} from '@langgenius/dify-ui/combobox'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { LogSourceIcon } from './source-icon'

export type SourceFilterValue = AgentLogSourceResponse['id'][]

const getSourceGroupLabel = (group: AgentLogSourceGroupResponse, t: TFunction<'agentV2'>) => {
  if (group.type === 'webapp') return t(($) => $['agentDetail.logs.filters.source.webapp'])
  if (group.type === 'workflow') return t(($) => $['agentDetail.logs.filters.source.workflow'])
  return group.label
}

const getSourceLabel = (source: AgentLogSourceResponse) => source.app_name

export function AgentLogSourcePicker({
  value,
  groups,
  isLoading,
  isError,
  onRetry,
  onChange,
}: {
  value: SourceFilterValue
  groups: AgentLogSourceGroupResponse[]
  isLoading: boolean
  isError: boolean
  onRetry: () => void
  onChange: (value: SourceFilterValue) => void
}) {
  const { t } = useTranslation('agentV2')
  const { t: tCommon } = useTranslation('common')
  const [inputValue, setInputValue] = useState('')
  const sources = groups.flatMap((group) => group.sources ?? [])
  const selectedSources = sources.filter((source) => value.includes(source.id))

  return (
    <Combobox<AgentLogSourceResponse, true>
      multiple
      items={groups}
      value={selectedSources}
      itemToStringLabel={getSourceLabel}
      onValueChange={(nextSources) => {
        setInputValue('')
        onChange(nextSources.map((source) => source.id))
      }}
      inputValue={inputValue}
      onInputValueChange={setInputValue}
    >
      <ComboboxTrigger
        aria-label={t(($) => $['agentDetail.logs.filters.source.label'])}
        className="mt-0 w-fit max-w-full min-w-22"
      >
        <ComboboxValue placeholder={t(($) => $['agentDetail.logs.filters.source.all'])}>
          {(selectedValue: AgentLogSourceResponse[]) => {
            if (selectedValue.length === 0)
              return t(($) => $['agentDetail.logs.filters.source.all'])
            if (selectedValue.length === 1) return selectedValue[0]!.app_name
            return tCommon(($) => $['dynamicSelect.selected'], { count: selectedValue.length })
          }}
        </ComboboxValue>
      </ComboboxTrigger>
      <ComboboxContent popupClassName="w-80 p-0">
        <div className="p-2 pb-1">
          <ComboboxInputGroup className="h-8 min-h-8 px-2">
            <span
              aria-hidden
              className="mr-0.5 i-ri-search-line size-4 shrink-0 text-components-input-text-placeholder"
            />
            <ComboboxInput
              aria-label={t(($) => $['agentDetail.logs.filters.source.searchLabel'])}
              placeholder={t(($) => $['agentDetail.logs.filters.source.searchPlaceholder'])}
              className="block h-4.5 grow px-1 py-0 system-sm-regular text-components-input-text-filled"
            />
          </ComboboxInputGroup>
        </div>
        {isLoading && (
          <SourcePickerStatus>
            {t(($) => $['agentDetail.logs.filters.source.loading'])}
          </SourcePickerStatus>
        )}
        {isError && (
          <SourcePickerStatus className="flex items-center justify-center gap-2">
            <span>{t(($) => $['agentDetail.logs.filters.source.loadFailed'])}</span>
            <Button variant="secondary" size="small" onClick={onRetry}>
              {t(($) => $['operation.retry'], { ns: 'common' })}
            </Button>
          </SourcePickerStatus>
        )}
        {!isLoading && !isError && (
          <>
            <ComboboxList className="max-h-69 p-2 pt-1">
              {groups.map((group) => (
                <ComboboxGroup key={group.type} items={group.sources ?? []}>
                  <ComboboxGroupLabel className="px-1 pt-2 pb-1">
                    {getSourceGroupLabel(group, t)}
                  </ComboboxGroupLabel>
                  <ComboboxCollection>
                    {(source: AgentLogSourceResponse) => (
                      <ComboboxItem
                        key={source.id}
                        value={source}
                        className="min-h-7 grid-cols-[1fr] gap-0 px-1 py-1"
                      >
                        <ComboboxItemText className="flex min-w-0 items-center gap-2 px-0 system-sm-regular">
                          <SourceCheckbox checked={value.includes(source.id)} />
                          <LogSourceIcon source={source} />
                          <span className="min-w-0 flex-1 truncate">{source.app_name}</span>
                        </ComboboxItemText>
                      </ComboboxItem>
                    )}
                  </ComboboxCollection>
                </ComboboxGroup>
              ))}
            </ComboboxList>
            <ComboboxEmpty className="px-3 py-3 text-center system-xs-regular">
              {t(($) => $['agentDetail.logs.filters.source.empty'])}
            </ComboboxEmpty>
          </>
        )}
      </ComboboxContent>
    </Combobox>
  )
}

function SourcePickerStatus({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <div className={cn('px-3 py-3 text-center system-xs-regular text-text-tertiary', className)}>
      {children}
    </div>
  )
}

function SourceCheckbox({ checked }: { checked: boolean }) {
  return (
    <span
      aria-hidden
      className={cn(
        'flex size-4 shrink-0 items-center justify-center rounded-sm border shadow-xs shadow-shadow-shadow-3',
        checked
          ? 'border-transparent bg-components-checkbox-bg text-components-checkbox-icon'
          : 'border-components-checkbox-border bg-components-checkbox-bg-unchecked',
      )}
    >
      {checked && <span className="i-ri-check-line size-3" />}
    </span>
  )
}