Add agent function to generate pipeline from user request

Addresses #21

Author: yamalight

app/components/agent/Chat.tsx

@@ -1,6 +1,6 @@
 import { PaperAirplaneIcon } from '@heroicons/react/24/solid';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { litlyticsAtom, pipelineAtom } from '~/store/store';
 import { Button } from '../catalyst/button';
 import { Input } from '../catalyst/input';
@@ -33,6 +33,7 @@ function MessageRender({ message }: { message: Message }) {
 }
 
 export function Chat() {
+  const messageBoxRef = useRef<HTMLDivElement>(null);
   const litlytics = useAtomValue(litlyticsAtom);
   const setPipeline = useSetAtom(pipelineAtom);
   const [input, setInput] = useState<string>('');
@@ -44,6 +45,16 @@ export function Chat() {
     },
   ]);
 
+  useEffect(() => {
+    // scroll to bottom
+    if (messageBoxRef.current) {
+      messageBoxRef.current.scrollTo({
+        top: messageBoxRef.current.scrollHeight,
+        behavior: 'smooth',
+      });
+    }
+  }, [messages]);
+
   const sendMessage = async () => {
     const inputMessage = input;
     // reset input
@@ -72,7 +83,10 @@ export function Chat() {
 
   return (
     <div className="flex flex-col w-full h-full">
-      <div className="flex flex-1 flex-col gap-4 p-3 pt-20">
+      <div
+        ref={messageBoxRef}
+        className="flex flex-1 flex-col gap-4 p-3 pt-20 max-h-screen overflow-auto"
+      >
         {messages.map((m) => (
           <MessageRender key={m.id} message={m} />
         ))}

app/components/agent/agent.ts

@@ -10,7 +10,7 @@ LitLytics allows creating custom text document processing pipelines using custom
 
 You have access to following LitLytics functions:
 - Suggest a list of possible pipelines that can be applied to user's documents
-- Generate a suggested pipeline for processing documents
+- Generate a new pipeline for processing documents for given task from user
 - Refine suggested pipeline for processing documents
 - Add a new step to pipeline
 - Edit a step in the pipeline
@@ -87,6 +87,40 @@ Generate a text description for user.`,
         );
       },
     }),
+    generatePipeline: tool({
+      description: `Generate a new pipeline for processing documents for given task from user.`,
+      parameters: z.object({
+        task: z.string(),
+      }),
+      execute: async ({ task }) => {
+        litlytics.setPipeline({
+          pipelineDescription: task,
+        });
+        // run task
+        const newPipeline = await litlytics.generatePipeline();
+        setPipeline(newPipeline);
+        // generate a response
+        const agentMessagesWithResult = agentMessages.concat([
+          {
+            content: `Suggested pipeline from function execution:
+${newPipeline.pipelinePlan}
+
+Ask a user if that look fine.`,
+            role: 'system',
+          },
+        ]);
+        const result = await litlytics.runPromptFromMessages({
+          messages: agentMessagesWithResult,
+        });
+        resolve(
+          messages.concat({
+            id: String(messages.length),
+            from: 'assistant',
+            text: result.result,
+          })
+        );
+      },
+    }),
   };
 
   // execute request