Improved logic related to passing props to custom adapters

nlkitai · May 15, 2024 · 7a7f387 · 7a7f387
1 parent fd7017e
commit 7a7f387
Show file tree

Hide file tree

Showing 34 changed files with 485 additions and 266 deletions.
diff --git a/packages/css/themes/src/common/components/Message.css b/packages/css/themes/src/common/components/Message.css
@@ -12,95 +12,95 @@
 
     > .nlux-md-strm-root {
         width: 100%;
+    }
 
-        > .nlux-md-cntr {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            gap: 0.5em;
+    .nlux-md-cntr {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        gap: 0.5em;
 
-            :is(p, pre, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, table, hr) {
-                margin: 0;
-                padding: 0;
-            }
+        :is(p, pre, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, table, hr) {
+            margin: 0;
+            padding: 0;
+        }
 
-            > .code-block {
-                font-family: var(--nlux-mono-font-family), monospace;
+        > .code-block {
+            font-family: var(--nlux-mono-font-family), monospace;
 
-                font-size: var(--nlux-font-size-s);
-                position: relative;
-                overflow: scroll;
-                padding: var(--nlux-padding) 0;
+            font-size: var(--nlux-font-size-s);
+            position: relative;
+            overflow: scroll;
+            padding: var(--nlux-padding) 0;
 
-                color: var(--nlux-code-block-text-color);
-                border: none;
-                border-radius: var(--nlux-border-radius-s);
-                background-color: var(--nlux-code-block-background-color);
-                box-shadow: var(--nlux-box-shadow);
-            }
+            color: var(--nlux-code-block-text-color);
+            border: none;
+            border-radius: var(--nlux-border-radius-s);
+            background-color: var(--nlux-code-block-background-color);
+            box-shadow: var(--nlux-box-shadow);
+        }
 
-            > .code-block > pre {
-                width: fit-content;
-                min-width: 100%;
-            }
+        > .code-block > pre {
+            width: fit-content;
+            min-width: 100%;
+        }
 
-            > .code-block > pre > div {
-                padding: 0 var(--nlux-padding-m);
-            }
+        > .code-block > pre > div {
+            padding: 0 var(--nlux-padding-m);
+        }
 
-            > .code-block > pre > div:hover {
-                background-color: var(--nlux-code-block-hover-background-color);
-            }
+        > .code-block > pre > div:hover {
+            background-color: var(--nlux-code-block-hover-background-color);
+        }
 
-            button.nlux-cpy-btn {
-                position: relative;
-                z-index: 999999;
-                width: 25px;
-                height: 24px;
+        button.nlux-cpy-btn {
+            position: relative;
+            z-index: 999999;
+            width: 25px;
+            height: 24px;
 
-                margin-right: 10px;
-                margin-bottom: -23px;
-                margin-left: auto;
+            margin-right: 10px;
+            margin-bottom: -23px;
+            margin-left: auto;
 
-                padding: 4px;
+            padding: 4px;
 
-                cursor: pointer;
-                color: var(--nlux-code-block-background-color);
-                border: 1px solid var(--nlux-code-block-background-color);
-                border-radius: var(--nlux-border-radius-xs);
-                background-color: var(--nlux-message-received-background-color);
-            }
+            cursor: pointer;
+            color: var(--nlux-code-block-background-color);
+            border: 1px solid var(--nlux-code-block-background-color);
+            border-radius: var(--nlux-border-radius-xs);
+            background-color: var(--nlux-message-received-background-color);
+        }
 
-            button.nlux-cpy-btn {
-                &.clicked,
-                &.clicked:hover {
-                    color: var(--nlux-message-received-background-color);
-                    border-color: var(--nlux-code-block-background-color);
-                    background-color: var(--nlux-code-block-background-color);
-                }
-
-                &:hover * {
-                    opacity: 0.5;
-                }
-
-                &.clicked:hover * {
-                    opacity: 1;
-                }
+        button.nlux-cpy-btn {
+            &.clicked,
+            &.clicked:hover {
+                color: var(--nlux-message-received-background-color);
+                border-color: var(--nlux-code-block-background-color);
+                background-color: var(--nlux-code-block-background-color);
             }
 
-            code {
-                font-family: var(--nlux-mono-font-family), monospace;
-                font-size: var(--nlux-font-size-s);
-                padding: var(--nlux-padding-xs) var(--nlux-padding-s);
-
-                color: var(--nlux-inline-code-text-color);
-                border-radius: var(--nlux-border-radius-xs);
-                background-color: var(--nlux-inline-code-background-color);
+            &:hover * {
+                opacity: 0.5;
             }
 
-            strong {
-                font-weight: bold;
+            &.clicked:hover * {
+                opacity: 1;
             }
         }
+
+        code {
+            font-family: var(--nlux-mono-font-family), monospace;
+            font-size: var(--nlux-font-size-s);
+            padding: var(--nlux-padding-xs) var(--nlux-padding-s);
+
+            color: var(--nlux-inline-code-text-color);
+            border-radius: var(--nlux-border-radius-xs);
+            background-color: var(--nlux-inline-code-background-color);
+        }
+
+        strong {
+            font-weight: bold;
+        }
     }
 }
diff --git a/packages/extra/markdown/src/index.ts b/packages/extra/markdown/src/index.ts
@@ -1,5 +1,6 @@
 import {HighlighterExtension} from '../../../js/core/src';
 import {createMdStreamRenderer} from '../../../shared/src/markdown/stream/streamParser';
+import {CallbackFunction} from '../../../shared/src/types/callbackFunction';
 
 export type MarkdownStreamParser = {
     next(value: string): void;
@@ -12,7 +13,7 @@ export type MarkdownStreamParserOptions = {
     skipStreamingAnimation?: boolean;
     streamingAnimationSpeed?: number;
     showCodeBlockCopyButton?: boolean;
-    onComplete?: Function;
+    onComplete?: CallbackFunction;
 };
 
 export const createMarkdownStreamParser = (

diff --git a/packages/js/core/src/exports/global.ts b/packages/js/core/src/exports/global.ts
@@ -1,5 +1,3 @@
-import {debug} from '../../../../shared/src/utils/debug';
-
 const globalNlux: {
     version: string;
     [key: string]: unknown;
@@ -19,7 +17,5 @@ export const getGlobalNlux = (): typeof globalNlux | undefined => {
     }
 
     theWindow.nlux = globalNlux;
-    debug('globalNlux', globalNlux);
-
     return globalNlux;
 };
diff --git a/packages/js/hf/src/createChatAdapter.ts b/packages/js/hf/src/createChatAdapter.ts
@@ -1,4 +1,6 @@
 import {ChatAdapterBuilder} from './hf/builder/builder';
 import {ChatAdapterBuilderImpl} from './hf/builder/builderImpl';
 
-export const createChatAdapter = <AiMsg>(): ChatAdapterBuilder<AiMsg> => new ChatAdapterBuilderImpl<AiMsg>();
+export const createChatAdapter = <AiMsg = string>(): ChatAdapterBuilder<AiMsg> => {
+    return new ChatAdapterBuilderImpl<AiMsg>();
+};
diff --git a/packages/js/langchain/src/index.ts b/packages/js/langchain/src/index.ts
@@ -13,4 +13,6 @@ export type {
 
 export type {LangServeEndpointType} from './langserve/types/langServe';
 
-export {createChatAdapter} from './langserve/builder/createChatAdapter';
+export {
+    createChatAdapter,
+} from './langserve/builder/createChatAdapter';
diff --git a/packages/js/langchain/src/langserve/adapter/adapter.ts b/packages/js/langchain/src/langserve/adapter/adapter.ts
@@ -128,12 +128,54 @@ export abstract class LangServeAbstractAdapter<AiMsg> implements StandardChatAda
         }
     }
 
-    preProcessAiStreamedChunk(chunk: string | object | undefined, extras: ChatAdapterExtras<AiMsg>): AiMsg | undefined {
-        throw new Error('Method not implemented.');
+    preProcessAiStreamedChunk(
+        chunk: string | object | undefined,
+        extras: ChatAdapterExtras<AiMsg>,
+    ): AiMsg | undefined {
+        if (this.outputPreProcessor) {
+            return this.outputPreProcessor(chunk);
+        }
+
+        if (typeof chunk === 'string') {
+            return chunk as AiMsg;
+        }
+
+        const content = (chunk as Record<string, unknown>)?.content;
+        if (typeof content === 'string') {
+            return content as AiMsg;
+        }
+
+        warn(
+            'LangServe adapter is unable to process the chunk from the runnable. Returning empty string. ' +
+            'You may want to implement an output pre-processor to handle chunks of custom responses.',
+        );
+
+        return undefined;
     }
 
-    preProcessAiUnifiedMessage(message: string | object | undefined, extras: ChatAdapterExtras<AiMsg>): AiMsg | undefined {
-        throw new Error('Method not implemented.');
+    preProcessAiUnifiedMessage(
+        message: string | object | undefined,
+        extras: ChatAdapterExtras<AiMsg>,
+    ): AiMsg | undefined {
+        if (this.outputPreProcessor) {
+            return this.outputPreProcessor(message);
+        }
+
+        if (typeof message === 'string') {
+            return message as AiMsg;
+        }
+
+        const content = (message as Record<string, unknown>)?.content;
+        if (typeof content === 'string') {
+            return content as AiMsg;
+        }
+
+        warn(
+            'LangServe adapter is unable to process the response from the runnable. Returning empty string. ' +
+            'You may want to implement an output pre-processor to handle custom responses.',
+        );
+
+        return undefined;
     }
 
     abstract streamText(

diff --git a/packages/js/langchain/src/langserve/builder/createChatAdapter.ts b/packages/js/langchain/src/langserve/builder/createChatAdapter.ts
@@ -1,6 +1,6 @@
 import {ChatAdapterBuilder} from './builder';
 import {LangServeAdapterBuilderImpl} from './builderImpl';
 
-export const createChatAdapter = function <AiMsg>(): ChatAdapterBuilder<AiMsg> {
+export const createChatAdapter = <AiMsg = string>(): ChatAdapterBuilder<AiMsg> => {
     return new LangServeAdapterBuilderImpl();
 };
diff --git a/packages/js/nlbridge/src/nlbridge/chatAdapter/adapter.ts b/packages/js/nlbridge/src/nlbridge/chatAdapter/adapter.ts
@@ -7,6 +7,7 @@ import {
     StreamingAdapterObserver,
 } from '@nlux/core';
 import {uid} from '../../../../../shared/src/utils/uid';
+import {warn} from '../../../../../shared/src/utils/warn';
 import {ChatAdapterOptions, ChatAdapterUsageMode} from '../types/chatAdapterOptions';
 
 export abstract class NLBridgeAbstractAdapter<AiMsg> implements StandardChatAdapter<AiMsg> {
@@ -71,11 +72,21 @@ export abstract class NLBridgeAbstractAdapter<AiMsg> implements StandardChatAdap
     ): Promise<string | object | undefined>;
 
     preProcessAiStreamedChunk(chunk: string | object | undefined, extras: ChatAdapterExtras<AiMsg>): AiMsg | undefined {
-        throw new Error('Method not implemented.');
+        if (typeof chunk === 'string') {
+            return chunk as AiMsg;
+        }
+
+        warn('NLBridge adapter received a non-string chunk from the server. Returning empty string.');
+        return '' as AiMsg;
     }
 
     preProcessAiUnifiedMessage(message: string | object | undefined, extras: ChatAdapterExtras<AiMsg>): AiMsg | undefined {
-        throw new Error('Method not implemented.');
+        if (typeof message === 'string') {
+            return message as AiMsg;
+        }
+
+        warn('NLBridge adapter received a non-string message from the server. Returning empty string.');
+        return '' as AiMsg;
     }
 
     abstract streamText(

diff --git a/packages/js/nlbridge/src/nlbridge/chatAdapter/builder/createChatAdapter.ts b/packages/js/nlbridge/src/nlbridge/chatAdapter/builder/createChatAdapter.ts
@@ -1,4 +1,6 @@
 import {ChatAdapterBuilder} from './builder';
 import {ChatAdapterBuilderImpl} from './builderImpl';
 
-export const createChatAdapter = <AiMsg = string>(): ChatAdapterBuilder<AiMsg> => new ChatAdapterBuilderImpl<AiMsg>();
+export const createChatAdapter = <AiMsg = string>(): ChatAdapterBuilder<AiMsg> => {
+    return new ChatAdapterBuilderImpl<AiMsg>();
+};
diff --git a/packages/js/nlbridge/src/nlbridge/chatAdapter/fetch.ts b/packages/js/nlbridge/src/nlbridge/chatAdapter/fetch.ts
@@ -8,7 +8,7 @@ export class NLBridgeFetchAdapter<AiMsg = string> extends NLBridgeAbstractAdapte
         super(options);
     }
 
-    async fetchText(message: string, extras: ChatAdapterExtras<AiMsg>): Promise<AiMsg> {
+    async fetchText(message: string, extras: ChatAdapterExtras<AiMsg>): Promise<string | object | undefined> {
         if (this.context && this.context.contextId) {
             await this.context.flush();
         }
@@ -43,10 +43,7 @@ export class NLBridgeFetchAdapter<AiMsg = string> extends NLBridgeAbstractAdapte
             typeof body.result === 'object' && body.result !== null &&
             typeof body.result.response === 'string'
         ) {
-            const {
-                response,
-                task,
-            } = body.result;
+            const {response, task} = body.result;
 
             if (
                 this.context && task
@@ -65,7 +62,11 @@ export class NLBridgeFetchAdapter<AiMsg = string> extends NLBridgeAbstractAdapte
         }
     }
 
-    streamText(message: string, observer: StreamingAdapterObserver, extras: ChatAdapterExtras<AiMsg>): void {
+    streamText(
+        message: string,
+        observer: StreamingAdapterObserver<string | object | undefined>,
+        extras: ChatAdapterExtras<AiMsg>,
+    ): void {
         throw new NluxUsageError({
             source: this.constructor.name,
             message: 'Cannot stream text from the fetch adapter!',