Updated custom comp in samples

nlkitai · May 15, 2024 · fd7017e · fd7017e
1 parent 93ee88d
commit fd7017e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/packages/react/core/src/exports/messageOptions.tsx b/packages/react/core/src/exports/messageOptions.tsx
@@ -5,7 +5,7 @@ export type ResponseComponentProps<AiMsg> = {
     uid: string;
     status: 'streaming' | 'complete';
     response?: AiMsg;
-    containerRef: RefObject<unknown>;
+    containerRef: RefObject<never>;
 };
 
 export type ResponseComponent<AiMsg> = FunctionComponent<ResponseComponentProps<AiMsg>>;

diff --git a/packages/react/core/src/logic/MessageRenderer/MessageRenderer.tsx b/packages/react/core/src/logic/MessageRenderer/MessageRenderer.tsx
@@ -35,7 +35,7 @@ export const createMessageRenderer: <AiMsg>(
             status,
             // We only pass the response to custom renderer when the status is 'complete'.
             response: status === 'complete' ? message as AiMsg : undefined,
-            containerRef: containerRefToUse,
+            containerRef: containerRefToUse as RefObject<never>,
         });
     }
 

diff --git a/samples/aiChat/react/src/App.tsx b/samples/aiChat/react/src/App.tsx
@@ -81,10 +81,31 @@ function App() {
                 syntaxHighlighter: highlighter,
                 // showCodeBlockCopyButton: false,
                 // streamingAnimationSpeed: 100,
-                responseComponent: ({response}) => {
+                promptComponent: ({prompt}) => {
                     return (
                         <div>
-                            <div>{response}</div>
+                            <div>{prompt}</div>
+                            <div style={{
+                                backgroundColor: 'lightgreen',
+                                padding: 10,
+                                borderRadius: 10,
+                                marginTop: 10,
+                                fontSize: '0.8em',
+                                textAlign: 'center',
+                            }}>Custom Prompt Component
+                            </div>
+                        </div>
+                    );
+                },
+                responseComponent: ({
+                    response,
+                    status,
+                    containerRef,
+                }) => {
+                    console.log(status);
+                    return (
+                        <div>
+                            {response ? <div>{response}</div> : <div ref={containerRef}/>}
                             <div style={{
                                 backgroundColor: 'lightblue',
                                 padding: 10,

diff --git a/samples/components/react/src/comp/AiChatReactExpo.tsx b/samples/components/react/src/comp/AiChatReactExpo.tsx
@@ -11,7 +11,9 @@ type MessageObjectType = {txt: string, color: string, bg: string};
 const possibleColors = ['red', 'green', 'blue', 'yellow', 'purple'];
 const possibleBackgrounds = ['white', 'black', 'gray', 'lightgray', 'darkgray'];
 
-const CustomMessageComponent: FunctionComponent<ResponseComponentProps<MessageObjectType>> = (
+const CustomMessageComponent: FunctionComponent<
+    ResponseComponentProps<MessageObjectType>
+> = (
     {response},
 ) => {
     const color = useMemo(() => possibleColors[Math.floor(Math.random() * possibleColors.length)], []);