Merge pull request #132 from oasisprotocol/mz/helpSection

Add help section to create flow

Author: buberdds

src/pages/CreateApp/AgentStep.tsx

@@ -24,7 +24,11 @@ export const AgentStep: FC<AgentStepProps> = ({
   selectedTemplateId,
 }) => {
   return (
-    <CreateLayout currentStep={2} selectedTemplateName={selectedTemplateName}>
+    <CreateLayout
+      currentStep={2}
+      selectedTemplateName={selectedTemplateName}
+      selectedTemplateId={selectedTemplateId}
+    >
       <CreateFormHeader title="Setup Agent" />
 
       {selectedTemplateId === 'tgbot' && (

src/pages/CreateApp/AgentStepHints.tsx

@@ -5,12 +5,13 @@ import { CreateFormNavigation } from './CreateFormNavigation'
 import { BuildForm } from '../../components/BuildForm'
 import { BuildFormData } from '../../types/build-form.ts'
 
-type AgentStepProps = {
+type BuildStepProps = {
   handleNext: () => void
   handleBack: () => void
   build?: BuildFormData
   setAppDataForm: (data: { build: BuildFormData }) => void
   selectedTemplateName?: string
+  selectedTemplateId?: string
   selectedTemplateRequirements?: {
     tee: 'tdx' | 'sgx' | undefined
     cpus: number | undefined
@@ -19,12 +20,13 @@ type AgentStepProps = {
   }
 }
 
-export const BuildStep: FC<AgentStepProps> = ({
+export const BuildStep: FC<BuildStepProps> = ({
   handleNext,
   handleBack,
   build,
   setAppDataForm,
   selectedTemplateName,
+  selectedTemplateId,
   selectedTemplateRequirements,
 }) => {
   const onSubmit = (values: BuildFormData) => {
@@ -33,7 +35,11 @@ export const BuildStep: FC<AgentStepProps> = ({
   }
 
   return (
-    <CreateLayout currentStep={3} selectedTemplateName={selectedTemplateName}>
+    <CreateLayout
+      currentStep={3}
+      selectedTemplateName={selectedTemplateName}
+      selectedTemplateId={selectedTemplateId}
+    >
       <CreateFormHeader title="Configure machine" />
 
       <BuildForm

src/pages/CreateApp/BuildStep.tsx

@@ -1,4 +1,5 @@
 import type { FC, ReactNode } from 'react'
+import { useState, useEffect } from 'react'
 import { Header } from '../../components/Layout/Header'
 import { Footer } from '../../components/Layout/Footer'
 import {
@@ -9,14 +10,30 @@ import {
 } from '@oasisprotocol/ui-library/src/components/ui/sidebar'
 import { Layout } from '@oasisprotocol/ui-library/src/components/ui/layout'
 import { SidebarItemLabel } from './SidebarItemLabel'
+import { HelpWidget } from './HelpWidget'
 
 type CreateLayoutProps = {
   children: ReactNode
   currentStep?: number
   selectedTemplateName?: string
+  selectedTemplateId?: string
 }
 
-export const CreateLayout: FC<CreateLayoutProps> = ({ children, currentStep = 1, selectedTemplateName }) => {
+export const CreateLayout: FC<CreateLayoutProps> = ({
+  children,
+  currentStep = 1,
+  selectedTemplateName,
+  selectedTemplateId,
+}) => {
+  const [isHelpPanelExpanded, setIsHelpPanelExpanded] = useState(() => {
+    const saved = localStorage.getItem('help-expanded')
+    return saved ? JSON.parse(saved) : false
+  })
+
+  useEffect(() => {
+    localStorage.setItem('help-expanded', JSON.stringify(isHelpPanelExpanded))
+  }, [isHelpPanelExpanded])
+
   const sidebarItems = [
     { label: 'Input metadata', active: currentStep === 1 },
     { label: 'Setup agent', active: currentStep === 2 },
@@ -51,7 +68,12 @@ export const CreateLayout: FC<CreateLayoutProps> = ({ children, currentStep = 1,
       }
     >
       <div className="flex-1 p-6 h-full">
-        <div className="flex-1 flex flex-col md:flex-row items-start h-full">
+        <div className="flex-1 flex flex-col items-start h-full relative">
+          <HelpWidget
+            selectedTemplateId={selectedTemplateId}
+            isExpanded={isHelpPanelExpanded}
+            setIsExpanded={setIsHelpPanelExpanded}
+          />
           <div className="max-w-lg mx-auto px-8 py-12 flex flex-col gap-8 items-center w-full">
             {children}
           </div>

src/pages/CreateApp/CreateLayout.tsx

@@ -0,0 +1,82 @@
+import { type FC } from 'react'
+import ReactMarkdown from 'react-markdown'
+import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
+import { ChevronRight, HelpCircle } from 'lucide-react'
+import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
+import xAgentDocs from '../../../templates/x-agent/README.md?raw'
+import tbotDocs from '../../../templates/tgbot/README.md?raw'
+import hlCopyTraderDocs from '../../../templates/hl-copy-trader/README.md?raw'
+
+type HelpWidgetProps = {
+  selectedTemplateId?: string
+  isExpanded: boolean
+  setIsExpanded: (expanded: boolean) => void
+}
+
+export const HelpWidget: FC<HelpWidgetProps> = ({ selectedTemplateId, isExpanded, setIsExpanded }) => {
+  const getMarkdownForTemplate = (templateId: string) => {
+    switch (templateId) {
+      case 'tgbot':
+        return tbotDocs
+      case 'x-agent':
+        return xAgentDocs
+      case 'hl-copy-trader':
+        return hlCopyTraderDocs
+      default:
+        return ''
+    }
+  }
+
+  if (!selectedTemplateId) {
+    return null
+  }
+
+  const markdown = getMarkdownForTemplate(selectedTemplateId)
+
+  if (!markdown) {
+    return null
+  }
+
+  return (
+    <>
+      <div
+        className={cn('right-0 top-26 md:top-16 h-[calc(100vh-8rem)] flex', !isExpanded ? 'hidden' : 'fixed')}
+      >
+        <div className="bg-background border-l border-border transition-transform duration-300 ease-in-out flex flex-col w-[min(380px,100vw)]">
+          <div className="flex items-center justify-between p-4 border-b bg-card">
+            <div className="flex items-center gap-2">
+              <HelpCircle className="h-4 w-4" />
+              <span className="text-sm font-medium">Template Guide</span>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsExpanded(false)}
+              className="h-8 w-8 p-0 hover:bg-muted"
+              title="Close panel"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-4">
+            {/* prose classes https://github.com/tailwindlabs/tailwindcss-typography */}
+            <div className="prose prose-sm dark:prose-invert max-w-none">
+              <ReactMarkdown>{markdown}</ReactMarkdown>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Button
+        variant="secondary"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className={cn('absolute top-0 right-0 transition-all duration-300', {
+          'opacity-0 pointer-events-none': isExpanded,
+          'opacity-100': !isExpanded,
+        })}
+      >
+        Need help?
+      </Button>
+    </>
+  )
+}

src/pages/CreateApp/HelpWidget.tsx

@@ -12,13 +12,15 @@ type MetadataStepProps = {
   setAppDataForm: (data: { metadata: MetadataFormData }) => void
   metadata?: MetadataFormData
   selectedTemplateName?: string
+  selectedTemplateId?: string
 }
 
 export const MetadataStep: FC<MetadataStepProps> = ({
   handleNext,
   setAppDataForm,
   metadata,
   selectedTemplateName,
+  selectedTemplateId,
 }) => {
   const form = useForm<MetadataFormData>({
     resolver: zodResolver(metadataFormSchema),
@@ -43,7 +45,11 @@ export const MetadataStep: FC<MetadataStepProps> = ({
   }
 
   return (
-    <CreateLayout currentStep={1} selectedTemplateName={selectedTemplateName}>
+    <CreateLayout
+      currentStep={1}
+      selectedTemplateName={selectedTemplateName}
+      selectedTemplateId={selectedTemplateId}
+    >
       <CreateFormHeader
         title="Input Metadata"
         description="All data you provide here will be visible publicly on-chain."

src/pages/CreateApp/MetadataStep.tsx

@@ -14,17 +14,19 @@ import { useNetwork } from '../../hooks/useNetwork.ts'
 import { sapphire, sapphireTestnet } from 'viem/chains'
 import { useTicker } from '../../hooks/useTicker'
 
-type AgentStepProps = {
+type PaymentStepProps = {
   handleNext: () => void
   handleBack: () => void
   selectedTemplateName?: string
+  selectedTemplateId?: string
   appData?: AppData
 }
 
-export const PaymentStep: FC<AgentStepProps> = ({
+export const PaymentStep: FC<PaymentStepProps> = ({
   handleNext,
   handleBack,
   selectedTemplateName,
+  selectedTemplateId,
   appData,
 }) => {
   const { address } = useAccount()
@@ -61,7 +63,11 @@ export const PaymentStep: FC<AgentStepProps> = ({
   }
 
   return (
-    <CreateLayout currentStep={4} selectedTemplateName={selectedTemplateName}>
+    <CreateLayout
+      currentStep={4}
+      selectedTemplateName={selectedTemplateName}
+      selectedTemplateId={selectedTemplateId}
+    >
       <CreateFormHeader
         title="Payment"
         description={

src/pages/CreateApp/PaymentStep.tsx

@@ -42,6 +42,7 @@ export const Create: FC = () => {
           metadata={appData?.metadata}
           setAppDataForm={setAppDataForm}
           selectedTemplateName={selectedTemplate?.name}
+          selectedTemplateId={selectedTemplate?.id}
         />
       )}
       {currentStep === 2 && (
@@ -61,6 +62,7 @@ export const Create: FC = () => {
           build={appData?.build}
           setAppDataForm={setAppDataForm}
           selectedTemplateName={selectedTemplate?.name}
+          selectedTemplateId={selectedTemplate?.id}
           selectedTemplateRequirements={{
             tee: selectedTemplate?.yaml.rofl.tee as 'tdx' | 'sgx' | undefined,
             cpus: selectedTemplate?.yaml.rofl.resources.cpus as number | undefined,
@@ -75,6 +77,7 @@ export const Create: FC = () => {
           handleBack={handleBack}
           appData={appData}
           selectedTemplateName={selectedTemplate?.name}
+          selectedTemplateId={selectedTemplate?.id}
         />
       )}
       {currentStep === 5 && <BootstrapStep appData={appData} template={selectedTemplate} />}