Merge pull request #216 from HyperChatBot/refactor-migrate-to-tauri2

refactor: use the sdk of openai and azure openai

package.json

@@ -15,6 +15,7 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "dependencies": {
+    "@azure/openai": "1.0.0-beta.12",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.13.3",

src/components/ChatBox/ContactHeader.tsx

@@ -172,7 +172,7 @@ const ContactHeader: FC = () => {
 
           <p className="flex items-center">
             <span
-              className={classNames('mr-2 h-2.5 w-2.5 rounded-full ', {
+              className={classNames('mr-2 h-2.5 w-2.5 rounded-full', {
                 'bg-red-500': !isOnline,
                 'bg-status-green': isOnline
               })}

src/components/ChatBox/InputBox.tsx

@@ -106,7 +106,7 @@ const InputBox: FC = () => {
         <textarea
           ref={textareaRef}
           className={classNames(
-            'w-full resize-none rounded-md border border-black/10 bg-white px-4 py-3 pr-10 text-sm text-black  outline-none dark:border-gray-900/50 dark:bg-gray-700 dark:text-white',
+            'w-full resize-none rounded-md border border-black/10 bg-white px-4 py-3 pr-10 text-sm text-black outline-none dark:border-gray-900/50 dark:bg-gray-700 dark:text-white',
             { 'pr-24': isAudioProduct(currProduct) }
           )}
           style={{

src/components/ChatBox/Markdown.tsx

@@ -3,7 +3,7 @@ import { FC, memo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneDark as mdCodeTheme } from 'react-syntax-highlighter/dist/esm/styles/prism'
-// import rehypeMathjax from 'rehype-mathjax'
+import rehypeMathjax from 'rehype-mathjax'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
@@ -15,26 +15,24 @@ const Markdown: FC<Props> = ({ raw }) => {
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm, remarkMath]}
-      // rehypePlugins={[rehypeMathjax]}
+      rehypePlugins={[rehypeMathjax]}
       components={{
         code({ className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || '')
-          return (
+          return match ? (
             <SyntaxHighlighter
               style={mdCodeTheme}
-              // FIXME: Azure OpenAI Service does not return the language of block code.
-              // Use `ts` as the temporary default.
-              language={match ? match[1] : 'ts'}
+              language={match[1]}
               PreTag="div"
               customStyle={{ borderRadius: 0, margin: 0 }}
             >
               {String(children).replace(/\n$/, '')}
             </SyntaxHighlighter>
+          ) : (
+            <code className={classNames('font-semibold', className)}>
+              `{children}`
+            </code>
           )
-
-          // <code className={classNames('font-semibold', className)}>
-          //   `{children}`
-          // </code>
         },
         p({ className, children, ...props }) {
           return (

src/components/Configuration/TextCompletion.tsx → src/components/Configuration/Completion.tsx

@@ -12,10 +12,7 @@ import Tooltip from '@mui/material/Tooltip'
 import { Formik, useFormikContext } from 'formik'
 import { FC, useEffect } from 'react'
 import { useRecoilState } from 'recoil'
-import {
-  TextCompletionConfiguration,
-  models
-} from 'src/configurations/textCompletion'
+import { CompletionConfiguration, models } from 'src/configurations/completion'
 import { useDB } from 'src/hooks'
 import { currConversationState } from 'src/stores/conversation'
 import { configurationDrawerVisibleState } from 'src/stores/global'
@@ -29,7 +26,7 @@ const Configuration: FC = () => {
   )
   const { updateOneById } = useDB('conversations')
 
-  const updateConfiguration = async (values: TextCompletionConfiguration) => {
+  const updateConfiguration = async (values: CompletionConfiguration) => {
     if (!currConversation) {
       return
     }
@@ -67,9 +64,9 @@ const Configuration: FC = () => {
 
         <Divider />
 
-        <Formik<TextCompletionConfiguration>
+        <Formik<CompletionConfiguration>
           initialValues={
-            currConversation.configuration as TextCompletionConfiguration
+            currConversation.configuration as CompletionConfiguration
           }
           onSubmit={updateConfiguration}
         >
@@ -99,9 +96,8 @@ const Configuration: FC = () => {
                 max={4000}
                 step={1}
                 defaultValue={
-                  (
-                    currConversation.configuration as TextCompletionConfiguration
-                  ).maxTokens
+                  (currConversation.configuration as CompletionConfiguration)
+                    .maxTokens
                 }
                 setFieldValue={(value: number) =>
                   formik.setFieldValue('maxTokens', value)
@@ -147,9 +143,8 @@ const Configuration: FC = () => {
                 max={1}
                 step={0.01}
                 defaultValue={
-                  (
-                    currConversation.configuration as TextCompletionConfiguration
-                  ).temperature
+                  (currConversation.configuration as CompletionConfiguration)
+                    .temperature
                 }
                 setFieldValue={(value: number) =>
                   formik.setFieldValue('temperature', value)
@@ -162,9 +157,8 @@ const Configuration: FC = () => {
                 max={1}
                 step={0.01}
                 defaultValue={
-                  (
-                    currConversation.configuration as TextCompletionConfiguration
-                  ).topP
+                  (currConversation.configuration as CompletionConfiguration)
+                    .topP
                 }
                 setFieldValue={(value: number) =>
                   formik.setFieldValue('topP', value)
@@ -177,9 +171,8 @@ const Configuration: FC = () => {
                 max={2}
                 step={0.01}
                 defaultValue={
-                  (
-                    currConversation.configuration as TextCompletionConfiguration
-                  ).frequencyPenalty
+                  (currConversation.configuration as CompletionConfiguration)
+                    .frequencyPenalty
                 }
                 setFieldValue={(value: number) =>
                   formik.setFieldValue('frequencyPenalty', value)
@@ -193,9 +186,8 @@ const Configuration: FC = () => {
                 max={2}
                 step={0.01}
                 defaultValue={
-                  (
-                    currConversation.configuration as TextCompletionConfiguration
-                  ).presencePenalty
+                  (currConversation.configuration as CompletionConfiguration)
+                    .presencePenalty
                 }
                 setFieldValue={(value: number) =>
                   formik.setFieldValue('frequencyPenalty', value)

src/components/Configuration/index.ts

@@ -1,13 +1,13 @@
 import AudioTranscriptionConfiguration from './AudioTranscription'
 import AudioTranslationConfiguration from './AudioTranslation'
 import ChatCompletionConfiguration from './ChatCompletion'
+import CompletionConfiguration from './Completion'
 import ImageGenerationConfiguration from './ImageGeneration'
-import TextCompletionConfiguration from './TextCompletion'
 
 export {
   AudioTranscriptionConfiguration,
   AudioTranslationConfiguration,
   ChatCompletionConfiguration,
-  ImageGenerationConfiguration,
-  TextCompletionConfiguration
+  CompletionConfiguration,
+  ImageGenerationConfiguration
 }

src/components/Sidebar/Items.tsx

@@ -27,7 +27,7 @@ export default [
     realm: [Companies.Azure, Companies.OpenAI]
   },
   {
-    product: Products.TextCompletion,
+    product: Products.Completion,
     inactive: (
       <ChatBubbleBottomCenterTextIconOutline className={iconClassName} />
     ),

src/configurations/textCompletion.ts → src/configurations/completion.ts

@@ -3,7 +3,7 @@ export interface ResponseText {
   content: string
 }
 
-export interface TextCompletionConfiguration {
+export interface CompletionConfiguration {
   model: (typeof models)[number]
   maxTokens: number
   temperature: number
@@ -23,7 +23,7 @@ export const models = [
   'text-ada-001'
 ] as const
 
-export const configuration: TextCompletionConfiguration = {
+export const configuration: CompletionConfiguration = {
   model: 'text-davinci-003',
   maxTokens: 800,
   temperature: 0.7,

src/configurations/imageGeneration.ts

@@ -2,8 +2,8 @@ import { ImageGenerateParams } from 'openai/resources'
 
 export interface ImageGenerationConfiguration {
   n: number
-  size: (typeof sizes)[number]
-  responseFormat: (typeof responseFormats)[number]
+  size: '256x256' | '512x512' | '1024x1024' | '1792x1024' | '1024x1792'
+  responseFormat: 'url' | 'b64_json'
 }
 
 export const sizes: ImageGenerateParams['size'][] = [

src/configurations/index.ts

@@ -2,15 +2,15 @@ import {
   AudioTranscriptionConfiguration,
   AudioTranslationConfiguration,
   ChatCompletionConfiguration,
-  ImageGenerationConfiguration,
-  TextCompletionConfiguration
+  CompletionConfiguration,
+  ImageGenerationConfiguration
 } from 'src/components/Configuration'
 import { Products } from 'src/types/global'
 import { configuration as audioTranscriptionConfiguration } from './audioTranscription'
 import { configuration as audioTranslationConfiguration } from './audioTranslation'
 import { configuration as chatCompletionConfiguration } from './chatCompletion'
+import { configuration as completionConfiguration } from './completion'
 import { configuration as imageGenerationConfiguration } from './imageGeneration'
-import { configuration as textCompletionConfiguration } from './textCompletion'
 
 export const configurations = {
   [Products.ChatCompletion]: {
@@ -21,9 +21,9 @@ export const configurations = {
     component: () => ImageGenerationConfiguration,
     default: imageGenerationConfiguration
   },
-  [Products.TextCompletion]: {
-    component: () => TextCompletionConfiguration,
-    default: textCompletionConfiguration
+  [Products.Completion]: {
+    component: () => CompletionConfiguration,
+    default: completionConfiguration
   },
   [Products.AudioTranscription]: {
     component: () => AudioTranscriptionConfiguration,

src/hooks/index.ts

@@ -1,29 +1,27 @@
 import useAppData from './useAppData'
 import useAudio from './useAudio'
 import useChatCompletion from './useChatCompletion'
+import useClients from './useClients'
+import useCompletion from './useCompletion'
 import useDB from './useDB'
 import useImageGeneration from './useImageGeneration'
 import useMessages from './useMessages'
 import useOnline from './useOnline'
-import useOpenAI from './useOpenAI'
 import useRequest from './useRequest'
 import useSettings from './useSettings'
-import useServices from './useSevices'
-import useTextCompletion from './useTextCompletion'
 import useTheme from './useTheme'
 
 export {
   useAppData,
   useAudio,
   useChatCompletion,
+  useClients,
+  useCompletion,
   useDB,
   useImageGeneration,
   useMessages,
   useOnline,
-  useOpenAI,
   useRequest,
-  useServices,
   useSettings,
-  useTextCompletion,
   useTheme
 }