Move examples into a new folder and reference them from help screen

Addresses #8

Author: yamalight

app/components/ui/Help.tsx

@@ -1,55 +1,17 @@
-import { Pipeline } from '@/src/pipeline/Pipeline';
-import { useSetAtom } from 'jotai';
-import { pipelineAtom } from '~/store/store';
-import { Button } from '../catalyst/button';
 import { CustomMarkdown } from '../markdown/Markdown';
-import compare from './examples/compare.json';
-import complaints from './examples/complaints.json';
-import jsonld from './examples/jsonld.json';
-import writing from './examples/writing.json';
-
-export function Help({ close }: { close: () => void }) {
-  const setPipeline = useSetAtom(pipelineAtom);
-
-  const setExample = (ex: object) => {
-    setPipeline(ex as Pipeline);
-    close();
-  };
 
+export function Help() {
   return (
     <div className="prose prose-sm dark:prose-invert max-w-full">
       <CustomMarkdown>
         {`LitLytics is an affordable, simple analytics platform for everyone designed to streamline the process of working with complex datasets.
 By combining LLMs with javascript, LitLytics allows you to generate complete data processing pipelines based on natural language descriptions.
 
 With LitLytics, you can transform data, extract insights, and automate routine tasks without having to write any code.
-Just describe the task in plain language, and LitLytics will handle the rest – from parsing and cleaning data to generating output in structured formats.`}
-      </CustomMarkdown>
+Just describe the task in plain language, and LitLytics will handle the rest – from parsing and cleaning data to generating output in structured formats.
 
-      <h3 className="mt-0">Try some examples:</h3>
-
-      <ul>
-        <li>
-          <Button plain onClick={() => setExample(complaints)}>
-            Extracting complaints from negative reviews
-          </Button>
-        </li>
-        <li>
-          <Button plain onClick={() => setExample(compare)}>
-            Comparing multiple products based on user input
-          </Button>
-        </li>
-        <li>
-          <Button plain onClick={() => setExample(jsonld)}>
-            Converting text into structured formats like JSON-LD
-          </Button>
-        </li>
-        <li>
-          <Button plain onClick={() => setExample(writing)}>
-            Writing Instagram posts with proof-reading for clarity and tone
-          </Button>
-        </li>
-      </ul>
+You can find examples in the repository in the [examples folder](https://github.com/yamalight/litlytics/tree/main/examples).`}
+      </CustomMarkdown>
     </div>
   );
 }

app/components/ui/Overlay.tsx

@@ -310,7 +310,7 @@ export function OverlayUI() {
           Welcome to 🔥 LitLytics – Your Automated Data Analytics Companion!
         </DialogTitle>
         <DialogBody className="w-full">
-          <Help close={() => setIsHelpOpen(false)} />
+          <Help />
         </DialogBody>
       </Dialog>
 

examples/README.md

@@ -0,0 +1,6 @@
+You can find following example pipeline for LitLytics in this folder:
+
+- [Extracting complaints from negative reviews](./complaints.json)
+- [Comparing multiple products based on user input](./compare.json)
+- [Converting text into structured formats like JSON-LD](./jsonld.json)
+- [Writing Instagram posts with proof-reading for clarity and tone](./writing.json)