Merge pull request #38 from aevo98765/issue/#28/description-for-skill…

…-and-knowledge

Issue/#28/description for skill and knowledge

src/components/Contribute/Knowledge/KnowledgeDescription.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/dynamic/icons/external-link-alt-icon';
+
+const KnowledgeDescription: React.FunctionComponent = () => {
+  return (
+    <div>
+      <p>
+        Knowledge in InstructLab is represented by question and answer pairs that involve facts, data, or references. This knowledge is represented in
+        the taxonomy tree and each node of this tree contains a qna.yaml file.
+      </p>
+      <div>
+        <a href="https://github.com/instructlab/taxonomy/blob/main/docs/KNOWLEDGE_GUIDE.md" target="_blank">
+          <Button variant="plain" aria-label="Learn more about what InstructLab Knowledge is">
+            Learn More
+            <ExternalLinkAltIcon style={{ padding: '3px' }}></ExternalLinkAltIcon>
+          </Button>
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default KnowledgeDescription;

src/components/Contribute/Knowledge/index.tsx

@@ -18,6 +18,7 @@ import { useSession } from 'next-auth/react';
 import YamlCodeModal from '../../YamlCodeModal';
 import { UploadFile } from './UploadFile';
 import { SchemaVersion } from '@/types';
+import KnowledgeDescription from './KnowledgeDescription';
 
 export const KnowledgeForm: React.FunctionComponent = () => {
   const { data: session } = useSession();
@@ -419,6 +420,19 @@ Creator names: ${creators}
           <CodeIcon /> View YAML
         </Button>
       </div>
+
+      <FormFieldGroupExpandable
+        toggleAriaLabel="Details"
+        header={
+          <FormFieldGroupHeader
+            titleText={{ text: 'Knowledge Description', id: 'knowledge-description' }}
+            titleDescription="What is InstructLab Knowledge?"
+          />
+        }
+      >
+        <KnowledgeDescription />
+      </FormFieldGroupExpandable>
+
       <FormFieldGroupExpandable
         isExpanded
         toggleAriaLabel="Details"

src/components/Contribute/Skill/SkillDescription.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/dynamic/icons/external-link-alt-icon';
+
+const SkillDescription: React.FunctionComponent = () => {
+  return (
+    <div>
+      <p>Skills in InstructLab come in two main types:</p>
+      <p>
+        1) Compositional Skills - These are skills that are performative and you are teaching the model how to do tasks like &quot;write me a
+        song&quot; or &quot;summarize an email&quot;.
+      </p>
+      <p>2) Core Skills - Core skills are foudational like math, reasoning and coding.</p>
+      <div>
+        <a href="https://github.com/instructlab/taxonomy/blob/main/docs/SKILLS_GUIDE.md" target="_blank">
+          <Button variant="plain" aria-label="Learn more about what Skills are in InstructLab">
+            Learn More
+            <ExternalLinkAltIcon style={{ padding: '3px' }}></ExternalLinkAltIcon>
+          </Button>
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default SkillDescription;

src/components/Contribute/Skill/index.tsx

@@ -17,6 +17,7 @@ import { getGitHubUsername } from '../../../utils/github';
 import { useSession } from 'next-auth/react';
 import YamlCodeModal from '../../YamlCodeModal';
 import { SchemaVersion } from '@/types';
+import SkillDescription from './SkillDescription';
 
 export const SkillForm: React.FunctionComponent = () => {
   const { data: session } = useSession();
@@ -342,6 +343,19 @@ export const SkillForm: React.FunctionComponent = () => {
           <CodeIcon /> View YAML
         </Button>
       </div>
+
+      <FormFieldGroupExpandable
+        toggleAriaLabel="Details"
+        header={
+          <FormFieldGroupHeader
+            titleText={{ text: 'Skills Description', id: 'skills-description' }}
+            titleDescription="What are InstructLab Skills?"
+          />
+        }
+      >
+        <SkillDescription />
+      </FormFieldGroupExpandable>
+
       <FormFieldGroupExpandable
         isExpanded
         toggleAriaLabel="Details"