🔌 fix: Minor Plugins Improvements (#1766)

* fix(PluginsClient): don't invoke `getFunctionModelName` when using Azure OpenAI

* fix: plugins styling fix with new cursor

* ci(PluginsClient): test azure exception for getFunctionModelName

api/app/clients/PluginsClient.js

@@ -30,7 +30,7 @@ class PluginsClient extends OpenAIClient {
 
     super.setOptions(options);
 
-    if (this.functionsAgent && this.agentOptions.model && !this.useOpenRouter) {
+    if (this.functionsAgent && this.agentOptions.model && !this.useOpenRouter && !this.azure) {
       this.agentOptions.model = this.getFunctionModelName(this.agentOptions.model);
     }
 

api/app/clients/specs/PluginsClient.test.js

@@ -2,8 +2,8 @@ const { HumanChatMessage, AIChatMessage } = require('langchain/schema');
 const PluginsClient = require('../PluginsClient');
 const crypto = require('crypto');
 
-jest.mock('../../../lib/db/connectDb');
+jest.mock('~/lib/db/connectDb');
-jest.mock('../../../models/Conversation', () => {
+jest.mock('~/models/Conversation', () => {
   return function () {
     return {
       save: jest.fn(),
@@ -12,6 +12,12 @@ jest.mock('../../../models/Conversation', () => {
   };
 });
 
+const defaultAzureOptions = {
+  azureOpenAIApiInstanceName: 'your-instance-name',
+  azureOpenAIApiDeploymentName: 'your-deployment-name',
+  azureOpenAIApiVersion: '2020-07-01-preview',
+};
+
 describe('PluginsClient', () => {
   let TestAgent;
   let options = {
@@ -187,4 +193,30 @@ describe('PluginsClient', () => {
       expect(client.getFunctionModelName('')).toBe('gpt-3.5-turbo');
     });
   });
+  describe('Azure OpenAI tests specific to Plugins', () => {
+    // TODO: add more tests for Azure OpenAI integration with Plugins
+    // let client;
+    // beforeEach(() => {
+    //   client = new PluginsClient('dummy_api_key');
+    // });
+
+    test('should not call getFunctionModelName when azure options are set', () => {
+      const spy = jest.spyOn(PluginsClient.prototype, 'getFunctionModelName');
+      const model = 'gpt-4-turbo';
+
+      // note, without the azure change in PR #1766, `getFunctionModelName` is called twice
+      const testClient = new PluginsClient('dummy_api_key', {
+        agentOptions: {
+          model,
+          agent: 'functions',
+        },
+        azure: defaultAzureOptions,
+      });
+
+      expect(spy).not.toHaveBeenCalled();
+      expect(testClient.agentOptions.model).toBe(model);
+
+      spy.mockRestore();
+    });
+  });
 });

client/src/components/Chat/Messages/Content/Markdown.tsx

@@ -72,7 +72,13 @@ const Markdown = memo(({ content, message, showCursor }: TContentProps) => {
 
   if (isInitializing) {
     rehypePlugins.pop();
-    return <span className="result-thinking" />;
+    return (
+      <div className="absolute">
+        <p className="relative">
+          <span className="result-thinking" />
+        </p>
+      </div>
+    );
   }
 
   let isValidIframe: string | boolean | null = false;

client/src/components/Chat/Messages/Content/MessageContent.tsx

@@ -127,7 +127,7 @@ const MessageContent = ({
           {showText ? (
             <DisplayMessage
               key={`display-${messageId}-${idx}`}
-              showCursor={isLastIndex && isLast}
+              showCursor={isLastIndex && isLast && isSubmitting}
               text={currentText}
               {...props}
             />

client/src/components/Messages/Content/Plugin.tsx

@@ -86,7 +86,7 @@ const Plugin: React.FC<PluginProps> = ({ plugin }) => {
               <div
                 className={cn(
                   plugin.loading ? 'bg-green-100' : 'bg-gray-20',
-                  'flex items-center rounded p-3 text-xs text-gray-900',
+                  'my-1 flex items-center rounded p-3 text-xs text-gray-900',
                 )}
               >
                 <div>

client/src/style.css

@@ -1815,7 +1815,7 @@ html {
   display:block;
   height:12px;
   position:absolute;
-  top:32px;
+  top:-11px;
   -webkit-transform:translateZ(0);
   transform:translateZ(0);
   -webkit-transform-origin:center;