Cole/def 5751 allow multiple textoutputs to render multiple text bloc…

…ks (#74)
definitive-io · Dec 21, 2023 · f005814 · f005814
1 parent 027b3e0
commit f005814
Show file tree

Hide file tree

Showing 10 changed files with 242 additions and 232 deletions.
diff --git a/examples/fast-api-server/library/piedpiper/spend_all_product.yaml b/examples/fast-api-server/library/piedpiper/spend_all_product.yaml
@@ -0,0 +1,29 @@
+display_name: Spend all products
+description: |
+  Show the spend for all products (top 5)
+sample_questions:
+  - show spend for all products
+parameters:
+  json_schema:
+    type: object
+    properties: {}
+    required: []
+type: DuckDBQueryFunction
+dataset: 'dummy-data/'
+sqls:
+  - |
+    SELECT purchases.product, SUM(purchases.amount) as amount,
+    FROM "purchases.csv"
+    GROUP BY purchases.product
+    ORDER BY amount DESC
+    LIMIT 5
+visualizations:
+  - |
+    def create_chart_config(dataframes):
+      df = dataframes[0]
+      data = [{'x': df.iloc[:, 0].tolist(), 'y': df.iloc[:, 1].tolist(), 'type': 'bar'}]
+      layout = {'title': 'Spend per Product', 'xaxis': {'title': 'Product'}, 'yaxis': {'title': 'Total Spend'}}
+      result = {'data': data, 'layout': layout}
+
+      return result
+summarization: 'Describe the spend per product'
diff --git a/examples/fast-api-server/library/piedpiper/spend_per_product.yaml b/examples/fast-api-server/library/piedpiper/spend_per_product.yaml
diff --git a/examples/next/src/app/page.tsx b/examples/next/src/app/page.tsx
@@ -8,18 +8,17 @@ export default function Home() {
       <div className="relative flex w-full h-full overflow-hidden">
         <div className="group w-full pl-0 animate-in duration-300 ease-in-out peer-[[data-state=open]]:lg:pl-[250px] peer-[[data-state=open]]:xl:pl-[300px]">
           <OpenAssistantsChat
-            api={`${
-              process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
-            }/v1alpha/assistants/hooli/chat`}
+            api={`${process.env.NEXT_PUBLIC_API_URL ||
+              'http://localhost:8000'}/v1alpha/assistants/hooli/chat`}
             name="Example Assistant"
             starterPrompts={[
               {
                 title: 'Show recent purchases',
                 prompt: 'Show recent purchases',
               },
               {
-                title: 'Show spend per product',
-                prompt: 'Show spend per product',
+                title: 'Show spend all products',
+                prompt: 'Show spend all products',
               },
               {
                 title: 'What can I ask?',

diff --git a/packages/openassistants-react/package.json b/packages/openassistants-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@definitive-io/openassistants-react",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "license": "MIT",
   "module": "dist/openassistants-react.esm.js",
   "main": "dist/index.js",

diff --git a/packages/openassistants-react/src/components/chat-content.tsx b/packages/openassistants-react/src/components/chat-content.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { MemoizedReactMarkdown } from './markdown';
+import remarkGfm from 'remark-gfm';
+import { CodeBlock } from './ui';
+
+export interface ChatContentProps {
+  content: string;
+}
+
+export const ChatContent = ({ content }: ChatContentProps) => {
+  return (
+    <div>
+      <MemoizedReactMarkdown
+        className={`prose break-words prose-p:leading-relaxed prose-pre:p-0`}
+        remarkPlugins={[remarkGfm]}
+        components={{
+          p({ children }) {
+            return <p className="mb-2 last:mb-0">{children}</p>;
+          },
+          code({ node, inline, className, children, ...props }) {
+            if (children.length) {
+              if (children[0] == '▍') {
+                return (
+                  <span className="mt-1 animate-pulse cursor-default">▍</span>
+                );
+              }
+
+              children[0] = (children[0] as string).replace('`▍`', '▍');
+            }
+
+            const match = /language-(\w+)/.exec(className || '');
+
+            if (inline) {
+              return (
+                <code className={className} {...props}>
+                  {children}
+                </code>
+              );
+            }
+            return (
+              <div>
+                {
+                  <CodeBlock
+                    key={Math.random()}
+                    language={(match && match[1]) || ''}
+                    value={String(children).replace(/\n$/, '')}
+                    {...props}
+                  />
+                }
+              </div>
+            );
+          },
+        }}
+      >
+        {content}
+      </MemoizedReactMarkdown>
+    </div>
+  );
+};
diff --git a/packages/openassistants-react/src/components/chat-list.tsx b/packages/openassistants-react/src/components/chat-list.tsx
@@ -33,62 +33,17 @@ export function OpenAssistantsChatList({
   return (
     <div className="relative mx-auto max-w-2xl px-4">
       {messages.map((message, index) => {
-        const outputs = 'outputs' in message ? message.outputs : null;
         return (
           <div key={index}>
-            {outputs &&
-              outputs.map((output, i) => {
-                console.log(
-                  `output.type=${output.type} output=${JSON.stringify(output)}`
-                );
-                return (
-                  <div key={`message_${index}_output_${i}`} className="mb-4">
-                    {output.type === 'dataframe' && (
-                      <DataframeTable
-                        key={`message_${index}_df_${i}`}
-                        title={output.title || ''}
-                        dataframe={output.dataframe}
-                      ></DataframeTable>
-                    )}
-                    {output.type === 'visualization' && (
-                      <RenderVisMessage
-                        id={`message-${index}-output-${i}`}
-                        data={output.visualization.data}
-                        layout={output.visualization.layout}
-                      />
-                    )}
-                  </div>
-                );
-              })}
-
-            {getContent(message) && (
-              <div key={index}>
-                <OpenAssistantsChatMessage
-                  key={index}
-                  message={message}
-                  onEdit={(m) => onEdit(index, m)}
-                  isLoading={isLoading}
-                />
-                {index < messages.length - 1 && <Separator className="my-4 " />}
-              </div>
-            )}
-
-            {message.role === 'assistant' && message.input_request && (
-              <FunctionForm
-                message={message}
-                onSubmit={(values) => {
-                  const newMessage = {
-                    role: 'user' as const,
-                    input_response: {
-                      name: message.input_request!.name,
-                      arguments: values,
-                    },
-                    content: '',
-                  };
-                  append(newMessage);
-                }}
-              ></FunctionForm>
-            )}
+            <OpenAssistantsChatMessage
+              key={index}
+              total={messages.length}
+              index={index}
+              message={message}
+              append={append}
+              onEdit={(m) => onEdit(index, m)}
+              isLoading={isLoading}
+            />
           </div>
         );
       })}