@gadmin2n/schematics 0.0.68 → 0.0.70

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/agentPanel/AgentPanel.tsx

@@ -1,497 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import {
-  Drawer,
-  Tabs,
-  Card,
-  Input,
-  Button,
-  Space,
-  Typography,
-  Tag,
-  message,
-  Empty,
-  Collapse,
-  Radio,
-} from 'antd';
-import {
-  AimOutlined,
-  CodeOutlined,
-  RobotOutlined,
-  FileTextOutlined,
-  SettingOutlined,
-  RightOutlined,
-} from '@ant-design/icons';
-import { useAgent, PageType } from './AgentContext';
-import {
-  skills,
-  getPageSkills,
-  getProjectSkills,
-  Skill,
-  SubSkill,
-} from './skills';
-import { generatePrompt } from './promptGenerator';
-import { ElementInspector } from './ElementInspector';
-
-const { TextArea } = Input;
-const { Text, Paragraph } = Typography;
-const { Panel } = Collapse;
-
-interface SubSkillListProps {
-  subSkills: SubSkill[];
-  selectedId: string | null;
-  onSelect: (id: string) => void;
-}
-
-const SubSkillList: React.FC<SubSkillListProps> = ({
-  subSkills,
-  selectedId,
-  onSelect,
-}) => {
-  return (
-    <Radio.Group
-      value={selectedId}
-      onChange={(e) => onSelect(e.target.value)}
-      style={{ width: '100%' }}
-    >
-      <Space direction="vertical" style={{ width: '100%' }} size={4}>
-        {subSkills.map((sub) => (
-          <Radio
-            key={sub.id}
-            value={sub.id}
-            style={{
-              width: '100%',
-              padding: '8px 12px',
-              borderRadius: 4,
-              backgroundColor: selectedId === sub.id ? '#e6f7ff' : '#fafafa',
-              border: selectedId === sub.id ? '1px solid #1890ff' : '1px solid #f0f0f0',
-            }}
-          >
-            <div>
-              <Text strong style={{ fontSize: 13 }}>{sub.name}</Text>
-              <Paragraph
-                type="secondary"
-                style={{ marginBottom: 0, fontSize: 12, marginTop: 2 }}
-                ellipsis={{ rows: 2 }}
-              >
-                {sub.description}
-              </Paragraph>
-            </div>
-          </Radio>
-        ))}
-      </Space>
-    </Radio.Group>
-  );
-};
-
-interface SkillCardProps {
-  skill: Skill;
-  selectedSubSkillId: string | null;
-  onSelectSubSkill: (skillId: string, subSkillId: string | null) => void;
-  expanded: boolean;
-  onExpand: (skillId: string) => void;
-}
-
-const SkillCard: React.FC<SkillCardProps> = ({
-  skill,
-  selectedSubSkillId,
-  onSelectSubSkill,
-  expanded,
-  onExpand,
-}) => {
-  const hasSubSkills = skill.subSkills && skill.subSkills.length > 0;
-  const isSubSkillSelected = skill.subSkills?.some((s) => s.id === selectedSubSkillId);
-
-  return (
-    <Card
-      size="small"
-      style={{
-        marginBottom: 8,
-        borderColor: isSubSkillSelected ? '#1890ff' : undefined,
-      }}
-      bodyStyle={{ padding: hasSubSkills ? 0 : 12 }}
-    >
-      {hasSubSkills ? (
-        <Collapse
-          ghost
-          activeKey={expanded ? [skill.id] : []}
-          onChange={() => onExpand(skill.id)}
-          expandIcon={({ isActive }) => (
-            <RightOutlined rotate={isActive ? 90 : 0} style={{ fontSize: 10 }} />
-          )}
-        >
-          <Panel
-            key={skill.id}
-            header={
-              <Space direction="vertical" size={2} style={{ width: '100%', overflow: 'hidden' }}>
-                <Space>
-                  <Text strong>{skill.name}</Text>
-                  {skill.pageTypes && (
-                    <Space size={2}>
-                      {skill.pageTypes.map((type) => (
-                        <Tag key={type} color="blue" style={{ margin: 0, fontSize: 10 }}>
-                          {type}
-                        </Tag>
-                      ))}
-                    </Space>
-                  )}
-                  <Tag color="green" style={{ margin: 0, fontSize: 10 }}>
-                    {skill.subSkills?.length} sub-skills
-                  </Tag>
-                </Space>
-                <Paragraph
-                  type="secondary"
-                  style={{ marginBottom: 0, fontSize: 12, wordBreak: 'break-word', whiteSpace: 'normal' }}
-                >
-                  {skill.description}
-                </Paragraph>
-              </Space>
-            }
-          >
-            <div style={{ padding: '8px 12px' }}>
-              <SubSkillList
-                subSkills={skill.subSkills!}
-                selectedId={selectedSubSkillId}
-                onSelect={(subId) => onSelectSubSkill(skill.id, subId)}
-              />
-            </div>
-          </Panel>
-        </Collapse>
-      ) : (
-        <div
-          style={{ cursor: 'pointer' }}
-          onClick={() => onSelectSubSkill(skill.id, null)}
-        >
-          <Space direction="vertical" size={4} style={{ width: '100%' }}>
-            <Space>
-              <Text strong>{skill.name}</Text>
-              {skill.pageTypes && (
-                <Space size={2}>
-                  {skill.pageTypes.map((type) => (
-                    <Tag key={type} color="blue" style={{ margin: 0 }}>
-                      {type}
-                    </Tag>
-                  ))}
-                </Space>
-              )}
-            </Space>
-            <Paragraph
-              type="secondary"
-              ellipsis={{ rows: 2, expandable: true, symbol: 'more' }}
-              style={{ marginBottom: 0, fontSize: 12 }}
-            >
-              {skill.description}
-            </Paragraph>
-          </Space>
-        </div>
-      )}
-    </Card>
-  );
-};
-
-interface SkillListProps {
-  skills: Skill[];
-  selectedSkillId: string | null;
-  selectedSubSkillId: string | null;
-  onSelect: (skillId: string, subSkillId: string | null) => void;
-  emptyText?: string;
-}
-
-const SkillList: React.FC<SkillListProps> = ({
-  skills,
-  selectedSkillId,
-  selectedSubSkillId,
-  onSelect,
-  emptyText = 'No skills available',
-}) => {
-  const [expandedSkillId, setExpandedSkillId] = useState<string | null>(null);
-
-  if (skills.length === 0) {
-    return <Empty description={emptyText} />;
-  }
-
-  return (
-    <div style={{ maxHeight: 350, overflowY: 'auto' }}>
-      {skills.map((skill) => (
-        <SkillCard
-          key={skill.id}
-          skill={skill}
-          selectedSubSkillId={
-            selectedSkillId === skill.id ? selectedSubSkillId : null
-          }
-          onSelectSubSkill={onSelect}
-          expanded={expandedSkillId === skill.id}
-          onExpand={(id) =>
-            setExpandedSkillId(expandedSkillId === id ? null : id)
-          }
-        />
-      ))}
-    </div>
-  );
-};
-
-const PageTypeLabel: Record<PageType, string> = {
-  list: 'List Page',
-  create: 'Create Page',
-  edit: 'Edit Page',
-  show: 'Show Page',
-  unknown: 'Unknown',
-};
-
-// Inner component that uses hooks - only rendered when agent is available
-interface AgentPanelInnerProps {
-  visible: boolean;
-  close: () => void;
-  pageInfo: { resourceName: string; pageType: PageType; path: string };
-  selectedSkillId: string | null;
-  setSelectedSkillId: (id: string | null) => void;
-  userPrompt: string;
-  setUserPrompt: (prompt: string) => void;
-  activeTab: 'page' | 'project';
-  setActiveTab: (tab: 'page' | 'project') => void;
-  startInspecting: () => void;
-  selectedSubSkillId: string | null;
-  setSelectedSubSkillId: (id: string | null) => void;
-}
-
-const AgentPanelInner: React.FC<AgentPanelInnerProps> = ({
-  visible,
-  close,
-  pageInfo,
-  selectedSkillId,
-  setSelectedSkillId,
-  userPrompt,
-  setUserPrompt,
-  activeTab,
-  setActiveTab,
-  startInspecting,
-  selectedSubSkillId,
-  setSelectedSubSkillId,
-}) => {
-
-  // Get filtered skills based on current page
-  const pageSkills = useMemo(() => {
-    if (pageInfo.pageType === 'unknown') {
-      return getPageSkills();
-    }
-    return getPageSkills(pageInfo.pageType);
-  }, [pageInfo.pageType]);
-
-  const projectSkills = useMemo(() => getProjectSkills(), []);
-
-  // Get selected skill and sub-skill
-  const selectedSkill = useMemo(
-    () => skills.find((s) => s.id === selectedSkillId),
-    [selectedSkillId],
-  );
-
-  const selectedSubSkill = useMemo(
-    () => selectedSkill?.subSkills?.find((s) => s.id === selectedSubSkillId),
-    [selectedSkill, selectedSubSkillId],
-  );
-
-  // Handle skill selection
-  const handleSelectSkill = (skillId: string, subSkillId: string | null) => {
-    setSelectedSkillId(skillId);
-    setSelectedSubSkillId(subSkillId);
-  };
-
-  // Handle copy prompt
-  const handleCopyPrompt = async () => {
-    if (!selectedSkill) {
-      message.warning('Please select a skill first');
-      return;
-    }
-
-    const prompt = generatePrompt({
-      skill: selectedSkill,
-      subSkill: selectedSubSkill || undefined,
-      pageInfo,
-      userPrompt,
-    });
-
-    try {
-      await navigator.clipboard.writeText(prompt);
-      message.success('Prompt copied to clipboard!');
-    } catch (err) {
-      message.error('Failed to copy prompt');
-    }
-  };
-
-  const tabItems = [
-    {
-      key: 'page',
-      label: (
-        <Space>
-          <FileTextOutlined />
-          This Page
-        </Space>
-      ),
-      children: (
-        <div>
-          {/* Inspector Button */}
-          <Button
-            icon={<AimOutlined />}
-            block
-            style={{ marginBottom: 12 }}
-            onClick={startInspecting}
-          >
-            检查模式
-            <span style={{ marginLeft: 8, fontSize: 12, color: '#999' }}>
-              (Alt+I 进入 / Esc 退出)
-            </span>
-          </Button>
-
-          {/* Page Info */}
-          <Card size="small" style={{ marginBottom: 12 }}>
-            <Space direction="vertical" size={4}>
-              <Text type="secondary">Current Page:</Text>
-              <Space>
-                <Tag color="green">{pageInfo.resourceName || 'N/A'}</Tag>
-                <Tag color="blue">{PageTypeLabel[pageInfo.pageType]}</Tag>
-              </Space>
-              <Text type="secondary" style={{ fontSize: 12 }}>
-                {pageInfo.path}
-              </Text>
-            </Space>
-          </Card>
-
-          {/* Skills List */}
-          <Text strong style={{ display: 'block', marginBottom: 8 }}>
-            Select a Skill:
-          </Text>
-          <SkillList
-            skills={pageSkills}
-            selectedSkillId={selectedSkillId}
-            selectedSubSkillId={selectedSubSkillId}
-            onSelect={handleSelectSkill}
-            emptyText="No page skills available for this page type"
-          />
-        </div>
-      ),
-    },
-    {
-      key: 'project',
-      label: (
-        <Space>
-          <SettingOutlined />
-          This Project
-        </Space>
-      ),
-      children: (
-        <div>
-          <Text strong style={{ display: 'block', marginBottom: 8 }}>
-            Select a Skill:
-          </Text>
-          <SkillList
-            skills={projectSkills}
-            selectedSkillId={selectedSkillId}
-            selectedSubSkillId={selectedSubSkillId}
-            onSelect={handleSelectSkill}
-            emptyText="No project skills available"
-          />
-        </div>
-      ),
-    },
-  ];
-
-  return (
-    <Drawer
-      title={
-        <Space>
-          <RobotOutlined />
-          Gadmin2 AI Agent
-        </Space>
-      }
-      placement="right"
-      width={520}
-      open={visible}
-      onClose={close}
-      footer={
-        <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
-          <Button onClick={close}>Cancel</Button>
-          <Button
-            type="primary"
-            icon={<CodeOutlined />}
-            onClick={handleCopyPrompt}
-            disabled={!selectedSkill}
-          >
-            Execute
-          </Button>
-        </Space>
-      }
-    >
-      <Tabs
-        activeKey={activeTab}
-        onChange={(key) => {
-          setActiveTab(key as 'page' | 'project');
-          setSelectedSkillId(null);
-          setSelectedSubSkillId(null);
-        }}
-        items={tabItems}
-        style={{ marginTop: '-24px' }}
-      />
-
-      {/* Preview selected skill */}
-      {selectedSkill && (
-        <div style={{ marginTop: 16 }}>
-          <Card size="small" title="Selected">
-            <Space direction="vertical" size={4} style={{ width: '100%' }}>
-              <Text strong>{selectedSkill.name}</Text>
-              {selectedSubSkill && (
-                <Tag color="purple">{selectedSubSkill.name}</Tag>
-              )}
-              <Paragraph
-                type="secondary"
-                style={{ marginBottom: 0, marginTop: 4, fontSize: 12 }}
-              >
-                {selectedSubSkill?.description || selectedSkill.description}
-              </Paragraph>
-            </Space>
-          </Card>
-
-          {/* User Prompt Input */}
-          <Text strong style={{ display: 'block', marginBottom: 8 }}>
-            Additional Instructions:
-          </Text>
-          <TextArea
-            value={userPrompt}
-            onChange={(e) => setUserPrompt(e.target.value)}
-            placeholder="Describe what customization you want to make..."
-            rows={4}
-            style={{ marginBottom: 12 }}
-          />
-        </div>
-      )}
-    </Drawer>
-  );
-};
-
-// Main component that checks for agent context
-export const AgentPanel: React.FC = () => {
-  const agent = useAgent();
-
-  // Don't render if not in AgentProvider (production mode)
-  if (!agent) return null;
-
-  return (
-    <>
-      <AgentPanelInner
-        visible={agent.visible}
-        close={agent.close}
-        pageInfo={agent.pageInfo}
-        selectedSkillId={agent.selectedSkillId}
-        setSelectedSkillId={agent.setSelectedSkillId}
-        userPrompt={agent.userPrompt}
-        setUserPrompt={agent.setUserPrompt}
-        activeTab={agent.activeTab}
-        setActiveTab={agent.setActiveTab}
-        startInspecting={agent.startInspecting}
-        selectedSubSkillId={agent.selectedSubSkillId}
-        setSelectedSubSkillId={agent.setSelectedSubSkillId}
-      />
-      <ElementInspector />
-    </>
-  );
-};
-
-export default AgentPanel;