working on customizations

.tool-versions

@@ -1,2 +1,2 @@
-nodejs 20.17.0
+nodejs 20.18.1
 yarn 1.22.22

package.json

@@ -1,11 +1,11 @@
 {
-  "name": "@nlux/monorepo",
-  "version": "latest",
-  "description": "NLUX is a JavaScript and React library for building conversational AI experiences.",
-  "author": "Salmen Hichri",
+  "name": "remix-nlux",
+  "version": "2.17.5",
+  "description": "Remix IDE NLUX integration. Remix IDE is the leading IDE for building and deploying smart contracts on Ethereum. NLUX is a JavaScript and React library for building conversational AI experiences.",
+  "author": "Remix IDE Project & Salmen Hichri",
   "license": "SEE LICENSE IN ROOT LICENSE FILE",
   "homepage": "https://docs.nlkit.com/nlux",
-  "private": true,
+  "private": false,
   "workspaces": [
     "dist/dev/*",
     "packages/*",
@@ -33,12 +33,14 @@
     "typescript-eslint": "^7",
     "vite": "^5"
   },
-  "bugs": "https://github.com/nlkitai/nlux/issues",
+  "bugs": "https://github.com/joeizang/nlux/issues",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/nlkitai/nlux.git"
+    "url": "git+ssh://git@github.com/joeizang/nlux.git"
   },
   "keywords": [
+    "remix-project",
+    "remix-project ai",
     "nlux",
     "js",
     "llm",

packages/js/core/src/aiChat/options/composerOptions.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export interface ComposerOptions {
     /**
      * Indicates whether the prompt input field should be focused when the prompt is shown.
@@ -35,3 +36,9 @@ export interface ComposerOptions {
      */
     submitShortcut?: 'Enter' | 'CommandEnter';
 }
+
+export interface RemixComposerOptions extends ComposerOptions {
+    remixMethodList: Array<string>
+
+    addContextFiles: (pluginName: any, methodName: string, payload: { context: 'currentFile' | 'workspace'|'openedFiles' | 'none', files?: Array<string> }) => Promise<any>
+}

packages/js/core/src/aiChat/options/messageOptions.ts

@@ -14,11 +14,12 @@ import {HighlighterExtension} from '../highlighter/highlighter';
  * representing the raw response received from the server.
  */
 export type ResponseRendererProps<AiMsg> = {
-    uid: string;
-    dataTransferMode: 'stream' | 'batch';
-    status: 'streaming' | 'complete';
-    content: [AiMsg];
-    serverResponse: unknown[];
+    uid: string
+    dataTransferMode: 'stream' | 'batch'
+    status: 'streaming' | 'complete'
+    content: [AiMsg]
+    serverResponse: unknown[]
+    trackSentiment?: (sentiment: string) => void
 };
 
 export type ResponseRenderer<AiMsg> = (props: ResponseRendererProps<AiMsg>) => HTMLElement | null;

packages/js/core/src/index.ts

@@ -13,7 +13,7 @@ export type {
     ConversationLayout,
 } from './aiChat/options/conversationOptions';
 
-export type {ComposerOptions} from './aiChat/options/composerOptions';
+export type {ComposerOptions, RemixComposerOptions} from './aiChat/options/composerOptions';
 
 export type {
     ResponseRenderer,

packages/js/core/src/sections/chat/chatRoom/chatRoom.render.ts

@@ -19,6 +19,7 @@ export const renderChatRoom: CompRenderer<
     // Contains the input field and submit button
     //
     const composerContainer = document.createElement('div');
+    // composerContainer.classList.add('nlux-composer-container');
     composerContainer.classList.add('nlux-composer-container');
 
     //

packages/react/core/src/components/ConversationStarters/ConversationStarters.tsx

@@ -8,7 +8,7 @@ export const ConversationStarters = (props: ConversationStartersProps) => {
             {props.items.map((conversationStarter, index) => (
                 <button
                     key={index}
-                    className="nlux-comp-conversationStarter"
+                    className="nlux-comp-conversationStarter btn btn-secondary btn-block"
                     onClick={() => onConversationStarterSelected(conversationStarter)}
                 >
                     <ConversationStarterIcon icon={conversationStarter.icon}/>

packages/react/core/src/exports/AiChat.tsx

@@ -26,6 +26,7 @@ import {useSubmitPromptHandler} from './hooks/useSubmitPromptHandler';
 import {useUiOverrides} from './hooks/useUiOverrides';
 import {usMarkdownContainers} from './hooks/usMarkdownContainers';
 import {AiChatProps} from './props';
+import { RemixComposerComp } from '../sections/Composer/RemixComposer';
 
 export const AiChat: <AiMsg>(
     props: AiChatProps<AiMsg>,
@@ -99,11 +100,11 @@ export const AiChat: <AiMsg>(
         aiChatProps: props, adapterToUse, conversationRef, initialSegment, newSegments,
         cancelledMessageIds, cancelledSegmentIds, prompt, composerOptions, showException,
         setChatSegments, setComposerStatus, setPrompt,
-    });
+    })
 
     const handleResubmitPrompt = useResubmitPromptHandler(
         initialSegment, setInitialSegment, newSegments, setChatSegments, setPrompt, setComposerStatus,
-    );
+    )
 
     const handleMarkdownStreamRendered = useCallback((_segmentId: string, messageId: string) => {
         if (props.events?.messageRendered) {
@@ -227,20 +228,22 @@ export const AiChat: <AiMsg>(
                             onMarkdownStreamRendered={handleMarkdownStreamRendered}
                         />
                     </div>
-                    <div className="nlux-composer-container">
-                        <ComposerComp
-                            status={composerStatus}
-                            prompt={prompt}
-                            hasValidInput={hasValidInput}
-                            placeholder={props.composerOptions?.placeholder}
-                            autoFocus={props.composerOptions?.autoFocus}
-                            submitShortcut={props.composerOptions?.submitShortcut}
-                            hideStopButton={props.composerOptions?.hideStopButton}
-                            onChange={handlePromptChange}
-                            onSubmit={handleSubmitPrompt}
-                            onCancel={cancelLastMessageRequest}
-                            Loader={uiOverrides.Loader}
-                        />
+                    <div id="remix-composer-container" className="nlux-composer-container">
+                        {uiOverrides.Composer ? (
+                            uiOverrides.Composer
+                        ) : (
+                            <RemixComposerComp
+                                status={composerStatus}
+                                prompt={prompt}
+                                hasValidInput={hasValidInput}
+                                onChange={handlePromptChange}
+                                onSubmit={handleSubmitPrompt}
+                                onCancel={cancelLastMessageRequest}
+                                addContextFiles={props.addContextFiles}
+                                trackSentiment={props.trackSentiment}
+                                Loader={uiOverrides.Loader}
+                            />
+                        )}
                     </div>
                 </div>
             </div>

packages/react/core/src/exports/AiChatUI.tsx

@@ -1,10 +1,11 @@
-import {ReactElement} from 'react';
-import {Greeting} from './elements/Greeting';
-import {Loader} from './elements/Loader';
-
+import {ReactElement} from 'react'
+import {Greeting} from './elements/Greeting'
+import {Loader} from './elements/Loader'
+import {Composer} from './elements/Composer'
 export type AiChatUIOverrides = {
-    Loader: ReactElement;
-    Greeting?: ReactElement;
+    Loader: ReactElement
+    Greeting?: ReactElement
+    Composer?: ReactElement
 }
 
 /**
@@ -13,4 +14,5 @@ export type AiChatUIOverrides = {
 export const AiChatUI = {
     Loader,
     Greeting,
+    Composer,
 };

packages/react/core/src/exports/elements/Composer.tsx

@@ -0,0 +1,9 @@
+import {FunctionComponent, PropsWithChildren} from 'react'
+
+/**
+ * A wrapper around a user-provided Composer component.
+ * When used, it will override the default Composer component.
+ */
+export const Composer: FunctionComponent<PropsWithChildren> = (props) => {
+    return <>{props.children}</>
+};

packages/react/core/src/exports/messageOptions.tsx

@@ -25,14 +25,15 @@ import {FC, RefObject} from 'react';
  * attach the rendered content to the DOM. Otherwise, you can ignore this prop and render the `content` directly.
  */
 export type ResponseRendererProps<AiMsg> = {
-    uid: string;
-    dataTransferMode: 'stream' | 'batch';
-    status: 'streaming' | 'complete';
-    contentType: 'text' | 'server-component';
-    content: AiMsg[];
-    serverComponent?: StreamedServerComponent;
-    serverResponse: unknown[];
-    containerRef?: RefObject<never>;
+    uid: string
+    dataTransferMode: 'stream' | 'batch'
+    status: 'streaming' | 'complete'
+    contentType: 'text' | 'server-component'
+    content: AiMsg[]
+    serverComponent?: StreamedServerComponent
+    serverResponse: unknown[]
+    containerRef?: RefObject<never>
+    trackSentiment?: (sentiment: string) => void
 };
 
 export type ResponseRenderer<AiMsg> = FC<ResponseRendererProps<AiMsg>>;

packages/react/core/src/exports/props.tsx

@@ -1,12 +1,13 @@
-import {ComposerOptions, DisplayOptions, EventsConfig, StandardChatAdapter} from '@nlux/core';
-import {ChatAdapterBuilder} from '@shared/types/adapters/chat/chatAdapterBuilder';
-import {ChatItem} from '@shared/types/conversation';
-import {ReactNode} from 'react';
-import {ChatAdapter} from '../types/chatAdapter';
-import {ConversationOptions} from '../types/conversationOptions';
-import {AiChatApi} from './hooks/useAiChatApi';
-import {MessageOptions} from './messageOptions';
-import {PersonaOptions} from './personaOptions';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {ComposerOptions, DisplayOptions, EventsConfig, RemixComposerOptions, StandardChatAdapter} from '@nlux/core'
+import {ChatAdapterBuilder} from '@shared/types/adapters/chat/chatAdapterBuilder'
+import {ChatItem} from '@shared/types/conversation'
+import {ReactNode} from 'react'
+import {ChatAdapter} from '../types/chatAdapter'
+import {ConversationOptions} from '../types/conversationOptions'
+import {AiChatApi} from './hooks/useAiChatApi'
+import {MessageOptions} from './messageOptions'
+import {PersonaOptions} from './personaOptions'
 
 /**
  * Props for the AiChat React component.
@@ -58,7 +59,18 @@ export type AiChatProps<AiMsg = string> = {
     /**
      * Options for the composer.
      */
-    composerOptions?: ComposerOptions;
+    composerOptions?: RemixComposerOptions
+
+    /**
+     * Function to add context files to the chat.
+     * This is used to provide file context to the AI model.
+     */
+    addContextFiles?: (pluginName: any, methodName: string, payload?: { context: 'currentFile' | 'workspace'|'openedFiles' | 'none', files?: Array<string> }) => Promise<any>
+
+    /**
+     * Function to track sentiment on matomo.
+     */
+    trackSentiment?: (sentiment: string) => void
 
     /**
      * Options for the persona.

packages/react/core/src/sections/Composer/ComposerComp.tsx

@@ -69,7 +69,7 @@ export const ComposerComp = (props: ComposerProps) => {
     }, [textareaRef.current]);
 
     return (
-        <div className={className}>
+        <div className={className} id="composer-container">
             <textarea
                 tabIndex={0}
                 ref={textareaRef}