feat: Add initial message property

Author: tjtanjin

src/core/useRcbPlugin.tsx

@@ -29,6 +29,7 @@ const useRcbPlugin = (pluginConfig?: PluginConfig): ReturnType<Plugin> => {
 	const outputTypeRef = useRef<'character' | 'chunk' | 'full'>('chunk');
 	const outputSpeedRef = useRef<number>(30);
 	const historySizeRef = useRef<number>(0);
+	const initialMessageRef = useRef<string>("");
 	const errorMessageRef = useRef<string>('Unable to get response, please try again.');
 	const onUserMessageRef = useRef<((msg: Message) => Promise<string | null>) | null>(null);
 	const onKeyDownRef = useRef<((e: KeyboardEvent) => Promise<string | null>) | null>(null);
@@ -54,39 +55,41 @@ const useRcbPlugin = (pluginConfig?: PluginConfig): ReturnType<Plugin> => {
 		outputTypeRef.current = block.llmConnector?.outputType ?? 'chunk';
 		outputSpeedRef.current = block.llmConnector?.outputSpeed ?? 30;
 		historySizeRef.current = block.llmConnector?.historySize ?? 0;
+		initialMessageRef.current = block.llmConnector?.initialMessage ?? "";
 		errorMessageRef.current = block.llmConnector?.errorMessage ?? 'Unable to get response, please try again.';
 		onUserMessageRef.current = block.llmConnector?.stopConditions?.onUserMessage ?? null;
 		onKeyDownRef.current = block.llmConnector?.stopConditions?.onKeyDown ?? null;
 	});
 
+	const refs = {
+		providerRef,
+		messagesRef,
+		outputTypeRef,
+		outputSpeedRef,
+		historySizeRef,
+		initialMessageRef,
+		errorMessageRef,
+		onUserMessageRef,
+		onKeyDownRef,
+	};
+
+	const actions = {
+		speakAudio,
+		injectMessage,
+		simulateStreamMessage,
+		streamMessage,
+		endStreamMessage,
+		toggleTextAreaDisabled,
+		toggleIsBotTyping,
+		focusTextArea,
+		goToPath,
+	};
+
 	// handles pre-processing and post-processing of blocks.
-	useProcessBlock(getBotId, toggleIsBotTyping, toggleTextAreaDisabled, focusTextArea);
+	useProcessBlock(getBotId, refs, actions);
 
 	// handles message events
-	useMessageHandler(
-		getBotId,
-		{
-			providerRef,
-			messagesRef,
-			outputTypeRef,
-			outputSpeedRef,
-			historySizeRef,
-			errorMessageRef,
-			onUserMessageRef,
-			onKeyDownRef,
-		},
-		{
-			speakAudio,
-			injectMessage,
-			simulateStreamMessage,
-			streamMessage,
-			endStreamMessage,
-			toggleTextAreaDisabled,
-			toggleIsBotTyping,
-			focusTextArea,
-			goToPath,
-		}
-	);
+	useMessageHandler(getBotId, refs, actions);
 
 	// initializes plugin metadata with plugin name
 	const pluginMetaData: ReturnType<Plugin> = { name: '@rcb-plugins/llm-connector' };

src/hooks/useMessageHandler.ts

@@ -27,6 +27,7 @@ const useMessageHandler = (
 		outputTypeRef: React.MutableRefObject<'character' | 'chunk' | 'full'>;
 		outputSpeedRef: React.MutableRefObject<number>;
 		historySizeRef: React.MutableRefObject<number>;
+		initialMessageRef: React.MutableRefObject<string>;
 		errorMessageRef: React.MutableRefObject<string>;
 		onUserMessageRef: React.MutableRefObject<((msg: Message) => Promise<string | null>) | null>;
 		onKeyDownRef: React.MutableRefObject<((e: KeyboardEvent) => Promise<string | null>) | null>;
@@ -43,7 +44,7 @@ const useMessageHandler = (
 		goToPath: (path: string) => void;
 	}
 ) => {
-	const { messagesRef, outputTypeRef, onUserMessageRef, onKeyDownRef } = refs;
+	const { messagesRef, outputTypeRef, onUserMessageRef, onKeyDownRef, errorMessageRef } = refs;
 	const {
 		injectMessage,
 		simulateStreamMessage,
@@ -102,9 +103,9 @@ const useMessageHandler = (
 					});
 					console.error('LLM prompt failed', err);
 					if (outputTypeRef.current === "full") {
-						injectMessage(refs.errorMessageRef.current);
+						injectMessage(errorMessageRef.current);
 					} else {
-						simulateStreamMessage(refs.errorMessageRef.current);
+						simulateStreamMessage(errorMessageRef.current);
 					}
 				});
 			}, STREAM_DEBOUNCE_MS);

src/hooks/useProcessBlock.ts

@@ -1,21 +1,43 @@
 import { useEffect, useCallback } from 'react';
-import { RcbPreProcessBlockEvent, RcbPostProcessBlockEvent } from 'react-chatbotify';
+import { RcbPreProcessBlockEvent, RcbPostProcessBlockEvent, Message } from 'react-chatbotify';
 import { LlmConnectorBlock } from '../types/LlmConnectorBlock';
+import { Provider } from '../types/Provider';
 
 /**
  * Handles pre-processing and post-processing of blocks.
  *
  * @param getBotId id of the chatbot
- * @param toggleIsBotTyping toggles typing indicator for the chatbot
- * @param toggleTextAreaDisabled toggles text area disabled state for the chatbot
- * @param focusTextArea focuses on the text area
+ * @param refs object containing relevant refs
+ * @param actions object containing relevant actions
  */
 const useProcessBlock = (
 	getBotId: () => string | null,
-	toggleIsBotTyping: (active?: boolean) => void,
-	toggleTextAreaDisabled: (active?: boolean) => void,
-	focusTextArea: () => void
+	refs: {
+		providerRef: React.MutableRefObject<Provider | null>;
+		messagesRef: React.MutableRefObject<Message[]>;
+		outputTypeRef: React.MutableRefObject<'character' | 'chunk' | 'full'>;
+		outputSpeedRef: React.MutableRefObject<number>;
+		historySizeRef: React.MutableRefObject<number>;
+		initialMessageRef: React.MutableRefObject<string>;
+		errorMessageRef: React.MutableRefObject<string>;
+		onUserMessageRef: React.MutableRefObject<((msg: Message) => Promise<string | null>) | null>;
+		onKeyDownRef: React.MutableRefObject<((e: KeyboardEvent) => Promise<string | null>) | null>;
+	},
+	actions: {
+		speakAudio: (text: string) => void;
+		injectMessage: (content: string | JSX.Element, sender?: string) => Promise<Message | null>;
+		simulateStreamMessage: (content: string, sender?: string) => Promise<Message | null>;
+		streamMessage: (msg: string) => void;
+		endStreamMessage: () => void;
+		toggleTextAreaDisabled: (active?: boolean) => void;
+		toggleIsBotTyping: (active?: boolean) => void;
+		focusTextArea: () => void;
+		goToPath: (path: string) => void;
+	}
 ) => {
+	const { outputTypeRef } = refs;
+	const { toggleTextAreaDisabled, toggleIsBotTyping, focusTextArea, injectMessage, simulateStreamMessage } = actions;
+
 	/**
 	 * Handles blocking of pre-processing and post-processing of block for full custom control.
 	 *
@@ -42,6 +64,13 @@ const useProcessBlock = (
 			// since pre-processing event is disabled, we simulate
 			// disabling typing indicator, enabling text area and focusing on it again
 			if (event.type === 'rcb-pre-process-block') {
+				if (block.llmConnector?.initialMessage) {
+					if (outputTypeRef.current === "full") {
+						injectMessage(refs.initialMessageRef.current);
+					} else {
+						simulateStreamMessage(refs.initialMessageRef.current);
+					}
+				}
 				toggleIsBotTyping(false);
 				toggleTextAreaDisabled(false);
 				setTimeout(() => {

src/types/LlmConnectorBlock.ts

@@ -10,6 +10,7 @@ export type LlmConnectorBlock = Block & {
 		outputType?: 'character' | 'chunk' | 'full';
 		outputSpeed?: number;
 		historySize?: number;
+		initialMessage?: string;
 		errorMessage?: string;
 		stopConditions?: {
 			onUserMessage?: (message: Message) => Promise<string | null>;

src/utils/promptHandler.tsx

@@ -35,6 +35,7 @@ const handlePrompt = async (
 		outputTypeRef: React.MutableRefObject<'character' | 'chunk' | 'full'>;
 		outputSpeedRef: React.MutableRefObject<number>;
 		historySizeRef: React.MutableRefObject<number>;
+		initialMessageRef: React.MutableRefObject<string>;
 		errorMessageRef: React.MutableRefObject<string>;
 		onUserMessageRef: React.MutableRefObject<((msg: Message) => Promise<string | null>) | null>;
 		onKeyDownRef: React.MutableRefObject<((e: KeyboardEvent) => Promise<string | null>) | null>;