Genarrative/apps/ai-game-creator-shell/src/view/project-development/ResourceDocumentPreviewDialog.tsx

import { X } from 'lucide-react';
import { useEffect, useMemo } from 'react';

import { PlatformActionButton } from '../../../../../packages/shared/src/components/PlatformActionButton';
import { PlatformIconButton } from '../../../../../packages/shared/src/components/PlatformIconButton';
import { ChatMarkdownMessage } from '../../components/ChatMarkdownMessage';
import { ThemedModal } from '../../components/modal/ThemedModal';
import { resourceDocumentPreviewMarkdown } from '../../features/resource-canvas/resourceDocumentPreviewModel';
import type { ProjectResourceCardPreviewState } from './resourceCardPreviewModel';
import type { ProjectResource } from './resourceProjectionModel';

export function ResourceDocumentPreviewDialog({
  resource,
  identity,
  preview,
  onRequestPreview,
  onClose,
}: {
  resource: ProjectResource;
  identity: string;
  preview: ProjectResourceCardPreviewState;
  onRequestPreview: (
    resource: ProjectResource,
    identity: string,
    reason: 'detail',
  ) => void;
  onClose: () => void;
}) {
  useEffect(() => {
    onRequestPreview(resource, identity, 'detail');
  }, [resource, identity, onRequestPreview]);
  const content =
    preview.status === 'loaded' ? preview.preview.content : undefined;
  const markdown = useMemo(
    () =>
      content === undefined
        ? ''
        : resourceDocumentPreviewMarkdown(resource, content),
    [resource, content],
  );

  return (
    <ThemedModal
      open
      ariaLabel="文档预览"
      onClose={onClose}
      panelClassName="game-resource-document-preview"
    >
      <header className="game-resource-document-preview__header">
        <strong title={resource.label}>{resource.label}</strong>
        <PlatformIconButton
          label="关闭文档预览"
          title="关闭"
          icon={<X size={18} aria-hidden="true" />}
          onClick={onClose}
        />
      </header>
      <div className="game-resource-document-preview__body">
        {preview.status === 'idle' || preview.status === 'loading' ? (
          <p role="status">正在加载文档…</p>
        ) : preview.status === 'failed' ? (
          <>
            <p role="alert">{preview.error}</p>
            {preview.retryable ? (
              <PlatformActionButton
                tone="secondary"
                onClick={() => onRequestPreview(resource, identity, 'detail')}
              >
                重试
              </PlatformActionButton>
            ) : null}
          </>
        ) : content === undefined ? (
          <p role="alert">没有可预览的文本内容</p>
        ) : content === '' ? (
          <p role="status">文档为空</p>
        ) : (
          <ChatMarkdownMessage
            role="assistant"
            text={markdown}
            preserveBlankLines
          />
        )}
      </div>
    </ThemedModal>
  );
}