From fd7017e48a96629f370137c7df573136460bedd1 Mon Sep 17 00:00:00 2001
From: Salmen Hichri <salmen.hichri@gmail.com>
Date: Wed, 15 May 2024 04:04:06 +0100
Subject: [PATCH] Updated custom comp in samples

---
 .../react/core/src/exports/messageOptions.tsx |  2 +-
 .../logic/MessageRenderer/MessageRenderer.tsx |  2 +-
 samples/aiChat/react/src/App.tsx              | 25 +++++++++++++++++--
 .../react/src/comp/AiChatReactExpo.tsx        |  4 ++-
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/react/core/src/exports/messageOptions.tsx b/packages/react/core/src/exports/messageOptions.tsx
index bb95fde7..269cd86e 100644
--- 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
index c449c5f7..5a1d89d0 100644
--- 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
index 64d7fc66..bf89ed62 100644
--- 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
index d267bed3..66d9b3c2 100644
--- 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)], []);