@gadmin2n/schematics 0.0.55

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

@@ -0,0 +1,497 @@
+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;