Hugging Face's logo

muthuk1
/
OpenMAIC-React

Model card Files
xet
 Community
OpenMAIC-React
File size: 4,839 Bytes
f56a29b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142


import { HelpCircle } from 'lucide-react';
import { useI18n } from '@/lib/hooks/use-i18n';
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@/components/ui/hover-card';

/**
 * Inline guide shown below the role selection cards.
 * Hover to reveal the 3-step PBL workflow as a popover above.
 */
export function PBLGuideInline() {
  const { t } = useI18n();

  return (
    <HoverCard openDelay={0} closeDelay={150}>
      <div className="w-full flex justify-center">
        <HoverCardTrigger asChild>
          <button className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors">
            <HelpCircle className="w-4 h-4" />
            <span>{t('pbl.guide.howItWorks')}</span>
          </button>
        </HoverCardTrigger>
      </div>
      <HoverCardContent
        side="top"
        collisionPadding={16}
        className="w-[380px] overflow-y-auto rounded-xl p-5"
        style={{
          maxHeight: 'var(--radix-hover-card-content-available-height, 70vh)',
        }}
      >
        <GuideContent />
      </HoverCardContent>
    </HoverCard>
  );
}

/**
 * Help button in workspace toolbar — hover to show guide popover.
 */
export function PBLGuidePanel() {
  const { t } = useI18n();

  return (
    <HoverCard openDelay={0} closeDelay={150}>
      <HoverCardTrigger asChild>
        <button
          className="flex items-center justify-center w-7 h-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
          title={t('pbl.guide.help')}
        >
          <HelpCircle className="w-4 h-4" />
        </button>
      </HoverCardTrigger>
      <HoverCardContent
        side="bottom"
        align="end"
        collisionPadding={16}
        className="w-[380px] overflow-y-auto rounded-xl p-5"
        style={{
          maxHeight: 'var(--radix-hover-card-content-available-height, 80vh)',
        }}
      >
        <GuideContent />
      </HoverCardContent>
    </HoverCard>
  );
}

function GuideContent() {
  const { t } = useI18n();

  return (
    <div className="space-y-5 text-[13px] leading-relaxed text-foreground">
      {/* Step 1 */}
      <section>
        <h4 className="font-semibold mb-1">{t('pbl.guide.step1.title')}</h4>
        <p className="text-muted-foreground">{t('pbl.guide.step1.desc')}</p>
      </section>

      <hr className="border-border" />

      {/* Step 2 */}
      <section>
        <h4 className="font-semibold mb-1">{t('pbl.guide.step2.title')}</h4>
        <p className="text-muted-foreground mb-3">{t('pbl.guide.step2.desc')}</p>

        <ol className="list-decimal list-inside space-y-3 text-muted-foreground">
          {/* 2-1 */}
          <li>
            <span className="font-medium text-foreground">{t('pbl.guide.step2.s1.title')}</span>
            <p className="mt-0.5 ml-[1.125rem]">{t('pbl.guide.step2.s1.desc')}</p>
          </li>

          {/* 2-2 */}
          <li>
            <span className="font-medium text-foreground">{t('pbl.guide.step2.s2.title')}</span>
            <code className="ml-1.5 text-xs bg-muted rounded px-1.5 py-0.5 font-mono">
              @question
            </code>
            <div className="mt-1.5 ml-[1.125rem] space-y-1.5">
              <pre className="text-xs bg-muted/70 rounded-md px-3 py-2 font-mono leading-relaxed overflow-x-auto">
                {t('pbl.guide.step2.s2.example')}
              </pre>
              <p>{t('pbl.guide.step2.s2.desc')}</p>
            </div>
          </li>

          {/* 2-3 */}
          <li>
            <span className="font-medium text-foreground">{t('pbl.guide.step2.s3.title')}</span>
            <code className="ml-1.5 text-xs bg-muted rounded px-1.5 py-0.5 font-mono">@judge</code>
            <div className="mt-1.5 ml-[1.125rem] space-y-1.5">
              <pre className="text-xs bg-muted/70 rounded-md px-3 py-2 font-mono leading-relaxed overflow-x-auto">
                {t('pbl.guide.step2.s3.example')}
              </pre>
              <p>{t('pbl.guide.step2.s3.desc')}</p>
              <ul className="space-y-0.5 mt-1">
                <li>
                  ✅ <span className="font-medium text-foreground">COMPLETE</span> →{' '}
                  {t('pbl.guide.step2.s3.complete')}
                </li>
                <li>
                  🔄 <span className="font-medium text-foreground">NEEDS_REVISION</span> →{' '}
                  {t('pbl.guide.step2.s3.revision')}
                </li>
              </ul>
            </div>
          </li>
        </ol>
      </section>

      <hr className="border-border" />

      {/* Step 3 */}
      <section>
        <h4 className="font-semibold mb-1">{t('pbl.guide.step3.title')}</h4>
        <p className="text-muted-foreground">{t('pbl.guide.step3.desc')}</p>
      </section>
    </div>
  );
}