AI Features

export const QBConfig = {
  credentials: {
   //.. other section data
  },
  configAIApi: {
    AIAnswerAssistWidgetConfig: {
      smartChatAssistantId:: 'sk-k2...LfK', // Should use your own data from your admin panel
    },
  },
  appConfig: {
     //... other section data
  },
};

export const QBConfig = {
  credentials: {
   //.. other section data
  },
  configAIApi: {
    AIAnswerAssistWidgetConfig: {
      apiKey: 'sk-k2...LfK', // Should use your own api key
      useDefault: true,
        //... other section data
    },
  },
  appConfig: {
     //... other section data
  },
};

export const QBConfig = {
  credentials: {
       //... other section data
  },
  configAIApi: {
    AIAnswerAssistWidgetConfig: {
      apiKey: '', // must be empty
      useDefault: true,
      proxyConfig: {
        api: 'v1/chat/completions',
        servername: 'https://myproxy.com',
        port: '',
        sessionToken: '',
      },
    },
  },
  appConfig: {
   //... other section data
  },
};

<QuickBloxUIKitDesktopLayout  
  theme={new CustomTheme()}  
  AIAssist={{ enabled: true, default: true }}  
/>

interface MessageWidgetProps {
  servername: string;
  api: string;
  port: string;
  sessionToken: string;
}
export default function useDefaultAIAssistAnswerWidgetWithOpenAIApi({
  servername,
  api,
  port,
  sessionToken,
}: MessageWidgetProps): AIMessageWidget {
  const [errorMessage, setErrorMessage] = useState<string>('');
  const [textFromWidgetToContent, setTextFromWidgetToContent] = useState('');

  const renderWidget = (): JSX.Element => {
    if (errorMessage && errorMessage.length > 0) {
      const errorsDescriptions:
        | { title: string; action: () => void }[]
        | undefined = [];

      return (
        <ErrorMessageIcon
          errorMessageText={errorMessage}
          errorsDescriptions={errorsDescriptions}
        />
      );
    }
   // you can customize your own Widget Icon markup
  
    return <AIWidgetIcon applyZoom color="green" />;
  };


  const textToWidget = (value: string, context: IChatMessage[]): void => {
    if (value && value.length > 0) {
      getData(value, context as ChatCompletionRequestMessage[]).then(
        (data) => {
          setTextFromWidgetToContent(data);
        },
      );
    }
  };

  async function getData(
    textToSend: string,
    dialogMessages: ChatCompletionRequestMessage[],
  ): Promise<string> {
    let answerSuggetion = '';

    if (textToSend.length === 0) return answerSuggetion;

    // your logic to use openai

    return answerSuggetion;
  }

  return {
    textToContent: textFromWidgetToContent,
    renderWidget,
    textToWidget,
  };
}

import React from 'react';
import * as QB from "quickblox/quickblox";
import {
   LoginData,
   QuickBloxUIKitProvider,
   qbDataContext,
   RemoteDataSource,
   useQBConnection, QuickBloxUIKitDesktopLayout,
} from 'quickblox-react-ui-kit';


function App() { 

  const currentUser: LoginData = {
   		userName: 'YOUR_REGISTRED_USER_NAME',
   		password: 'YOUR_REGISTRED_USER_PASSWORD',
  };
  
  const apiKey = 'sk-9aXs...ZFqhU'; // use your Api Key
  const openAIConfiguration: Configuration = new Configuration({
    apiKey,
  });

  const openAIApi: OpenAIApi = new OpenAIApi(openAIConfiguration);

  const defaultAIAnswerToMessageWidget =
    useDefaultAIAssistAnswerWidgetWithOpenAIApi({
      ...QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig,
      openAIApi,
    });

	return (
   <QuickBloxUIKitProvider
       maxFileSize={100 * 1000000}
       accountData={{ ...QBConfig.credentials }}
       qbConfig={{ ...QBConfig }}
       loginData={{
           login: currentUser.login,
           password: currentUser.password,
       }} >
   <div className="App">
       <QuickBloxUIKitDesktopLayout
           theme={new DefaultTheme()}
           AIAssist={{
                     enabled: true,
                     default: false,
                     AIWidget: defaultAIAnswerToMessageWidget,
                   }}
       />
   </div>
  </QuickBloxUIKitProvider>
);

}

export default App;

<DesktopLayout
      theme={theme}
      dialogsView={
        <DialogsComponent
         // ...
        />
      }
      dialogMessagesView={
          <MessagesView
            subHeaderContent={<CompanyLogo />}
            upHeaderContent={<CompanyLogo />}
            dialogsViewModel={dialogsViewModel}
            onDialogInformationHandler={informationOpenHandler}
            theme={theme}
            AIAnswerToMessage={defaultAIAnswerToMessageWidget}
          />
      }
      dialogInfoView={
          <DialogInformation
           // ...
           />
      }
    />

npm install qb-ai-answer-assistant

import { ChatMessage } from 'qb-ai-core';
import { AIAnswerAssistantSettings, QBAIAnswerAssistant } from 'qb-ai-answer-assistant';

let prompt =  "YOUR_TEXT_TO_ANSWER_ASSIST";

let messages = [
  {role: Role.other, content: "Hello, Bob!"},
  {role: Role.me, content: "Hi, Jim!"},
  {role: Role.me, content: prompt},
]

let prompt =  "YOUR_TEXT_TO_ANSWER_ASSIST";

let messages = [
  {role: "assistant", content: "Hello, Bob!"},
  {role: "user", content: "Hi, Jim!"},
  {role: "user", content: prompt},
]

    const settings: AIAnswerAssistantSettings =
     QBAIAnswerAssistant.createDefaultAIAnswerAssistantSettings();

    settings.apiKey = 'YOUR_OPEN_AI_API_KEY';
    settings.organization = 'YOUR_ORGANIZATION';//  might be empty
    settings.model = AIModel.gpt__3_5__turbo;

    return QBAIAnswerAssistant.createAnswer(
      promt,
      messages,
      settings,
    );

    const settings: AIAnswerAssistantSettings =
      QBAIAnswerAssistant.createDefaultAIAnswerAssistantSettings();

    settings.organization = 'YOUR_ORGANIZATION';//  might be empty
    settings.model = AIModel.gpt__3_5__turbo;
    settings.token = 'YOUR_QUICKBLOX_USER_SESSION_TOKEN';
    settings.serverPath = `https://your-proxy-server-url`;

    return QBAIAnswerAssistant.createAnswer(
      promt,
      messages,
      settings,
    );

export const QBConfig = {
  credentials: {
   //.. other section data
  },
  configAIApi: {
    AITranslateWidgetConfig: {
      smartChatAssistantId:: 'sk-k2...LfK', // Should use your own data from your admin panel
    },
  },
  appConfig: {
     //... other section data
  },
};

export const QBConfig = {
  credentials: {
   //.. other section data
  },
  configAIApi: {
    AITranslateWidgetConfig: {
      apiKey: 'sk-k2...LfK', // Change to your real API key
      useDefault: true,
      defaultLanguage: 'English',
      languages: [
        'English',
        'Spanish',
        'French',
        'Portuguese',
        'German',
        'Ukrainian',
      ],
        //... other section data
    },
  },
  appConfig: {
     //... other section data
  },
};

export const QBConfig = {
  credentials: {
       //... other section data
  },
  configAIApi: {
    AITranslateWidgetConfig: {
      apiKey: '', // must be empty
      useDefault: true,
      defaultLanguage: 'English',
      languages: [
        'English',
        'Spanish',
        'French',
        'Portuguese',
        'German',
        'Ukrainian',
      ]
      proxyConfig: {
        api: 'v1/chat/completions',
        servername: 'https://myproxy.com',
        port: '',
        sessionToken: '',
      },
    },
  },
  appConfig: {
   //... other section data
  },
};

<QuickBloxUIKitDesktopLayout  
  theme={new CustomTheme()}  
  AITranslate={{ enabled: true, default: true }}  
/>

interface MessageWidgetProps {
  servername: string;
  api: string;
  port: string;
  sessionToken: string;
}
export default function useDefaultAITranslateWidget({
  servername,
  api,
  port,
  sessionToken,
}: MessageWidgetProps): AIMessageWidget {
  const [errorMessage, setErrorMessage] = useState<string>('');
  const [textFromWidgetToContent, setTextFromWidgetToContent] = useState('');

  const renderWidget = (): JSX.Element => {
    if (errorMessage && errorMessage.length > 0) {
      const errorsDescriptions:
        | { title: string; action: () => void }[]
        | undefined = [];

      return (
        <ErrorMessageIcon
          errorMessageText={errorMessage}
          errorsDescriptions={errorsDescriptions}
        />
      );
    }
   // you can customize your own Widget Icon markup
  
    return <AIWidgetIcon applyZoom color="green" />;
  };


  const textToWidget = async (
    textToSend: string,
    context: IChatMessage[],
    additionalSettings?: { [key: string]: any },
  ): Promise<string> => {
    if (textToSend && textToSend.length > 0) {
      let prompt = "Your prompt text with textToSend data";
      const { yourAdditionalParam } = additionalSettings || {};

     // your logic

      return await getData(prompt, context).then((data) => {
        setTextFromWidgetToContent(data);

        return data;
      });
    }

    return '';
  };

  async function getData(
    prompt: string,
    dialogMessages: IChatMessage[],
  ): Promise<string> {
    let outputMessage = '';
    
		// your logic to use openai
 
    return outputMessage;
  }

  return {
    textToContent: textFromWidgetToContent,
    renderWidget,
    textToWidget,
  };
}

import React from 'react';
import * as QB from "quickblox/quickblox";
import {
   LoginData,
   QuickBloxUIKitProvider,
   qbDataContext,
   RemoteDataSource,
   useQBConnection, QuickBloxUIKitDesktopLayout,
   UseDefaultAITranslateWidget
} from 'quickblox-react-ui-kit';


function App() { 

  const currentUser: LoginData = {
   		userName: 'YOUR_REGISTRED_USER_NAME',
   		password: 'YOUR_REGISTRED_USER_PASSWORD',
  };
  
  const apiKey = 'sk-9aXs...ZFqhU'; // use your Api Key
  const openAIConfiguration: Configuration = new Configuration({
    apiKey,
  });

  const openAIApi: OpenAIApi = new OpenAIApi(openAIConfiguration);

  defaultAITranslateWidget = UseDefaultAITranslateWidget({
          ...QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig,
          sessionToken: token,
        });

	return (
   <QuickBloxUIKitProvider
       maxFileSize={100 * 1000000}
       accountData={{ ...QBConfig.credentials }}
       qbConfig={{ ...QBConfig }}
       loginData={{
           login: currentUser.login,
           password: currentUser.password,
       }} >
   <div className="App">
       <QuickBloxUIKitDesktopLayout
           theme={new DefaultTheme()}
           AITranslate={{
                     enabled: true,
                     default: false,
                     AIWidget: defaultAITranslateWidget,
                   }}
       />
   </div>
  </QuickBloxUIKitProvider>
);

}

export default App;

<DesktopLayout
      theme={theme}
      dialogsView={
        <DialogsComponent
         // ...
        />
      }
      dialogMessagesView={
          <MessagesView
            subHeaderContent={<CompanyLogo />}
            upHeaderContent={<CompanyLogo />}
            dialogsViewModel={dialogsViewModel}
            onDialogInformationHandler={informationOpenHandler}
            theme={theme}
            AITranslate={defaultAITranslateWidget}
          />
      }
      dialogInfoView={
          <DialogInformation
           // ...
           />
      }
    />

npm install qb-ai-translate

import { ChatMessage } from 'qb-ai-core';
import { AITranslateSettings, QBAITranslate } from 'qb-ai-translate';

let prompt =  "YOUR_TEXT_TO_TRANSLATE";

let messages = [
  {role: Role.other, content: "Hello, Bob!"},
  {role: Role.me, content: "Hi, Jim!"},
  {role: Role.me, content: prompt},
]

let prompt =  "YOUR_TEXT_TO_TRANSLATE";

let messages = [
  {role: "assistant", content: "Hello, Bob!"},
  {role: "user", content: "Hi, Jim!"},
  {role: "user", content: prompt},
]

    const settings: AITranslateSettings =
      QBAITranslate.createDefaultAITranslateSettings();

    settings.apiKey = 'YOUR_OPEN_AI_API_KEY';
    settings.organization = 'YOUR_ORGANIZATION';//  might be empty
    settings.model = AIModel.gpt__3_5__turbo;
    settings.language = 'LANGUAGE'; // in BCP47 format
                                    // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/languages
                                    // https://datatracker.ietf.org/doc/html/rfc5646
    


return QBAITranslate.translate(
      promt,
      messages,
      settings,
    );

    const settings: AITranslateSettings =
      QBAITranslate.createDefaultAITranslateSettings();

    settings.organization = 'YOUR_ORGANIZATION';//  might be empty
    settings.model = AIModel.gpt__3_5__turbo;
    settings.token = 'YOUR_QUICKBLOX_USER_SESSION_TOKEN';
    settings.language = 'LANGUAGE';
    settings.serverPath = `https://your-proxy-server-url`;

    return QBAITranslate.translate(
      promt,
      messages,
      settings,
    );

export const QBConfig = {
  credentials: {
   //.. other section data
  },
  configAIApi: {
    AIRephraseWidgetConfig: {
      apiKey: 'sk-k2...LfK',  // use your Api Key
      useDefault: true,
      defaultTone: 'Professional',
      Tones: [
        {
          name: 'Professional Tone',
          description:
            'This would edit messages to sound more formal, using technical vocabulary, clear sentence structures, and maintaining a respectful tone. It would avoid colloquial language and ensure appropriate salutations and sign-offs',
          iconEmoji: '👔',
        },
        {
          name: 'Friendly Tone',
          description:
            'This would adjust messages to reflect a casual, friendly tone. It would incorporate casual language, use emoticons, exclamation points, and other informalities to make the message seem more friendly and approachable.',
          iconEmoji: '🤝',
        },
        {
          name: 'Encouraging Tone',
          description:
            'This tone would be useful for motivation and encouragement. It would include positive words, affirmations, and express support and belief in the recipient.',
          iconEmoji: '💪',
        },
        {
          name: 'Empathetic Tone',
          description:
            'This tone would be utilized to display understanding and empathy. It would involve softer language, acknowledging feelings, and demonstrating compassion and support.',
          iconEmoji: '🤲',
        },
        {
          name: 'Neutral Tone',
          description:
            'For times when you want to maintain an even, unbiased, and objective tone. It would avoid extreme language and emotive words, opting for clear, straightforward communication.',
          iconEmoji: '😐',
        },
        {
          name: 'Assertive Tone',
          description:
            'This tone is beneficial for making clear points, standing ground, or in negotiations. It uses direct language, is confident, and does not mince words.',
          iconEmoji: '🔨',
        },
        {
          name: 'Instructive Tone',
          description:
            'This tone would be useful for tutorials, guides, or other teaching and training materials. It is clear, concise, and walks the reader through steps or processes in a logical manner.',
          iconEmoji: '📖',
        },
        {
          name: 'Persuasive Tone',
          description:
            'This tone can be used when trying to convince someone or argue a point. It uses persuasive language, powerful words, and logical reasoning.',
          iconEmoji: '☝️',
        },
        {
          name: 'Sarcastic/Ironic Tone',
          description:
            'This tone can make the communication more humorous or show an ironic stance. It is harder to implement as it requires the AI to understand nuanced language and may not always be taken as intended by the reader.',
          iconEmoji: '😏',
        },
        {
          name: 'Poetic Tone',
          description:
            'This would add an artistic touch to messages, using figurative language, rhymes, and rhythm to create a more expressive text.',
          iconEmoji: '🎭',
        },
      ],
    },
  },
  appConfig: {
     //... other section data
  },
};

export const QBConfig = {
  credentials: {
       //... other section data
  },
  configAIApi: {
    AIRephraseWidgetConfig: {
      apiKey: '', // must be empty
      useDefault: true,
      proxyConfig: {
        api: 'v1/chat/completions',
        servername: 'https://myproxy.com',
        port: '',
        sessionToken: '',
      },
    },
  },
  appConfig: {
   //... other section data
  },
};

<QuickBloxUIKitDesktopLayout  
  theme={new CustomTheme()}  
  AIRephrase={{ enabled: true, default: true }}  
/>

interface MessageWidgetProps {
  servername: string;
  api: string;
  port: string;
  sessionToken: string;
}
export default function UseDefaultAIRephraseMessageWidget({
  servername,
  api,
  port,
  sessionToken,
}: MessageWidgetProps): AIMessageWidget {
  const [errorMessage, setErrorMessage] = useState<string>('');
  const [textFromWidgetToContent, setTextFromWidgetToContent] = useState('');

  const renderWidget = (): JSX.Element => {
    if (errorMessage && errorMessage.length > 0) {
      const errorsDescriptions:
        | { title: string; action: () => void }[]
        | undefined = [];

      return (
        <ErrorMessageIcon
          errorMessageText={errorMessage}
          errorsDescriptions={errorsDescriptions}
        />
      );
    }
   // you can customize your own Widget Icon markup
  
    return <AIWidgetIcon applyZoom color="green" />;
  };


  const textToWidget = async (
    textToSend: string,
    context: IChatMessage[],
    additionalSettings?: { [key: string]: any },
  ): Promise<string> => {
    if (textToSend && textToSend.length > 0) {
      
      let prompt = "Your prompt text with textToSend data";
      const { yourAdditionalParam } = additionalSettings || {};
      
      // your logic

      // eslint-disable-next-line no-return-await
      return await getData(prompt, context).then((data) => {
        setTextFromWidgetToContent(data);

        return data;
      });
    }

    //
    return '';
  };

  async function getData(
    prompt: string,
    dialogMessages: IChatMessage[],
  ): Promise<string> {
    let outputMessage = '';
    
    // your logic to use openai
      
    return outputMessage;
  }

  return {
    textToContent: textFromWidgetToContent,
    renderWidget,
    textToWidget,
  };
}

import React from 'react';
import * as QB from "quickblox/quickblox";
import {
   LoginData,
   QuickBloxUIKitProvider,
   qbDataContext,
   RemoteDataSource,
   useQBConnection, QuickBloxUIKitDesktopLayout,
   UseDefaultAIRephraseMessageWidget,
} from 'quickblox-react-ui-kit';


function App() { 

  const currentUser: LoginData = {
   		userName: 'YOUR_REGISTRED_USER_NAME',
   		password: 'YOUR_REGISTRED_USER_PASSWORD',
  };
  
  const apiKey = 'sk-9aXs...ZFqhU'; // use your Api Key
  const openAIConfiguration: Configuration = new Configuration({
    apiKey,
  });

  const openAIApi: OpenAIApi = new OpenAIApi(openAIConfiguration);

  const defaultAIRephraseMessageWidget =
    UseDefaultAIRephraseMessageWidget({
      ...QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig,
      sessionToken: token,
    });

	return (
   <QuickBloxUIKitProvider
       maxFileSize={100 * 1000000}
       accountData={{ ...QBConfig.credentials }}
       qbConfig={{ ...QBConfig }}
       loginData={{
           login: currentUser.login,
           password: currentUser.password,
       }} >
   <div className="App">
       <QuickBloxUIKitDesktopLayout
           theme={new DefaultTheme()}
           AIRephrase={{
                     enabled: true,
                     default: false,
                     AIWidget: defaultAIRephraseMessageWidget,
                   }}
       />
   </div>
  </QuickBloxUIKitProvider>
);

}

export default App;

<DesktopLayout
      theme={theme}
      dialogsView={
        <DialogsComponent
         // ...
        />
      }
      dialogMessagesView={
          <MessagesView
            subHeaderContent={<CompanyLogo />}
            upHeaderContent={<CompanyLogo />}
            dialogsViewModel={dialogsViewModel}
            onDialogInformationHandler={informationOpenHandler}
            theme={theme}
            AIRephrase={defaultAIRephraseMessageWidget}
          />
      }
      dialogInfoView={
          <DialogInformation
           // ...
           />
      }
    />

npm install qb-ai-rephrase

import { ChatMessage } from 'qb-ai-core';
import { AIRephraseSettings, QBAIRephrase } from 'qb-ai-rephrase';

let prompt =  "YOUR_TEXT_TO_REPHRASE";

let messages = [
  {role: Role.other, content: "Hello, Bob!"},
  {role: Role.me, content: "Hi, Jim!"},
  {role: Role.me, content: prompt},
]

let prompt =  "YOUR_TEXT_TO_REPHRASE";

let messages = [
  {role: "assistant", content: "Hello, Bob!"},
  {role: "user", content: "Hi, Jim!"},
  {role: "user", content: prompt},
]

    const settings: AIRephraseSettings =
       QBAIRephrase.createDefaultAIRephraseSettings();

    settings.apiKey = 'YOUR_OPEN_AI_API_KEY';
    settings.organization = 'YOUR_ORGANIZATION';//  might be empty
    settings.model = AIModel.gpt__3_5__turbo;
    settings.tone = { name : 'YOUR_TONE_NAME', 
                      description: 'YOUR_TONE_DESCRIPTION', // might be empty
                      iconEmoji: 'YOUR_EMOJI'};  // might be empty

    return QBAIRephrase.rephrase(
      promt,
      messages,
      settings,
    );

    const settings: AIRephraseSettings =
       QBAIRephrase.createDefaultAIRephraseSettings();

    settings.organization = 'YOUR_ORGANIZATION';//  might be empty
    settings.model = AIModel.gpt__3_5__turbo;
    settings.tone = { name : 'YOUR_TONE_NAME',
                      description: 'YOUR_TONE_DESCRIPTION', // might be empty
                      iconEmoji: 'YOUR_EMOJI'};  // might be empty
    settings.token = 'YOUR_QUICKBLOX_USER_SESSION_TOKEN';
    settings.serverPath = `https://your-proxy-server-url`;

    return QBAIRephrase.rephrase(
      promt,
      messages,
      settings,
    );