From eee5977e0849e20290bd6577a87c8f2876af962c Mon Sep 17 00:00:00 2001
From: YanceyOfficial <yanceyofficial@gmail.com>
Date: Thu, 10 Oct 2024 16:55:40 +0800
Subject: [PATCH] refactor: use the sdk of openai and azure openai

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  93 +++++++
 src/components/ChatBox/ContactHeader.tsx      |   2 +-
 src/components/ChatBox/InputBox.tsx           |   2 +-
 src/components/ChatBox/Markdown.tsx           |  18 +-
 .../{TextCompletion.tsx => Completion.tsx}    |  36 +--
 src/components/Configuration/index.ts         |   6 +-
 src/components/Sidebar/Items.tsx              |   2 +-
 .../{textCompletion.ts => completion.ts}      |   4 +-
 src/configurations/imageGeneration.ts         |   4 +-
 src/configurations/index.ts                   |  12 +-
 src/hooks/index.ts                            |  10 +-
 src/hooks/useAppData.ts                       |  10 +-
 src/hooks/useAudio.ts                         |  92 +++++--
 src/hooks/useChatCompletion.ts                | 253 ++++++++++++------
 src/hooks/useClients.ts                       |  22 ++
 src/hooks/useCompletion.ts                    |  98 +++++++
 src/hooks/useImageGeneration.ts               |  76 ++----
 src/hooks/useOpenAI.ts                        |  16 --
 src/hooks/useRequest.ts                       |  22 +-
 src/hooks/useSevices.ts                       |  69 -----
 src/hooks/useTextCompletion.ts                |  63 -----
 src/types/conversation.ts                     |   4 +-
 src/types/global.ts                           |  10 +-
 24 files changed, 553 insertions(+), 372 deletions(-)
 rename src/components/Configuration/{TextCompletion.tsx => Completion.tsx} (91%)
 rename src/configurations/{textCompletion.ts => completion.ts} (86%)
 create mode 100644 src/hooks/useClients.ts
 create mode 100644 src/hooks/useCompletion.ts
 delete mode 100644 src/hooks/useOpenAI.ts
 delete mode 100644 src/hooks/useSevices.ts
 delete mode 100644 src/hooks/useTextCompletion.ts

diff --git a/package.json b/package.json
index 7ee7639..8d961a6 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fc2d237..b0b7418 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@azure/openai':
+    specifier: 1.0.0-beta.12
+    version: 1.0.0-beta.12
   '@emoji-mart/data':
     specifier: ^1.2.1
     version: 1.2.1
@@ -226,6 +229,96 @@ packages:
       is-potential-custom-element-name: 1.0.1
     dev: false
 
+  /@azure-rest/core-client@1.4.0:
+    resolution: {integrity: sha512-ozTDPBVUDR5eOnMIwhggbnVmOrka4fXCs8n8mvUo4WLLc38kki6bAOByDoVZZPz/pZy2jMt2kwfpvy/UjALj6w==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      '@azure/abort-controller': 2.1.2
+      '@azure/core-auth': 1.8.0
+      '@azure/core-rest-pipeline': 1.17.0
+      '@azure/core-tracing': 1.2.0
+      '@azure/core-util': 1.10.0
+      tslib: 2.7.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@azure/abort-controller@2.1.2:
+    resolution: {integrity: sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      tslib: 2.7.0
+    dev: false
+
+  /@azure/core-auth@1.8.0:
+    resolution: {integrity: sha512-YvFMowkXzLbXNM11yZtVLhUCmuG0ex7JKOH366ipjmHBhL3vpDcPAeWF+jf0X+jVXwFqo3UhsWUq4kH0ZPdu/g==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      '@azure/abort-controller': 2.1.2
+      '@azure/core-util': 1.10.0
+      tslib: 2.7.0
+    dev: false
+
+  /@azure/core-rest-pipeline@1.17.0:
+    resolution: {integrity: sha512-62Vv8nC+uPId3j86XJ0WI+sBf0jlqTqPUFCBNrGtlaUeQUIXWV/D8GE5A1d+Qx8H7OQojn2WguC8kChD6v0shA==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      '@azure/abort-controller': 2.1.2
+      '@azure/core-auth': 1.8.0
+      '@azure/core-tracing': 1.2.0
+      '@azure/core-util': 1.10.0
+      '@azure/logger': 1.1.4
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.5
+      tslib: 2.7.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@azure/core-sse@2.1.3:
+    resolution: {integrity: sha512-KSSdIKy8kvWCpYr8Hzpu22j3wcXsVTYE0IlgmI1T/aHvBDsLgV91y90UTfVWnuiuApRLCCVC4gS09ApBGOmYQA==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      tslib: 2.7.0
+    dev: false
+
+  /@azure/core-tracing@1.2.0:
+    resolution: {integrity: sha512-UKTiEJPkWcESPYJz3X5uKRYyOcJD+4nYph+KpfdPRnQJVrZfk0KJgdnaAWKfhsBBtAf/D58Az4AvCJEmWgIBAg==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      tslib: 2.7.0
+    dev: false
+
+  /@azure/core-util@1.10.0:
+    resolution: {integrity: sha512-dqLWQsh9Nro1YQU+405POVtXnwrIVqPyfUzc4zXCbThTg7+vNNaiMkwbX9AMXKyoFYFClxmB3s25ZFr3+jZkww==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      '@azure/abort-controller': 2.1.2
+      tslib: 2.7.0
+    dev: false
+
+  /@azure/logger@1.1.4:
+    resolution: {integrity: sha512-4IXXzcCdLdlXuCG+8UKEwLA1T1NHqUfanhXYHiQTn+6sfWCZXduqbtXDGceg3Ce5QxTGo7EqmbV6Bi+aqKuClQ==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      tslib: 2.7.0
+    dev: false
+
+  /@azure/openai@1.0.0-beta.12:
+    resolution: {integrity: sha512-qKblxr6oVa8GsyNzY+/Ub9VmEsPYKhBrUrPaNEQiM+qrxnBPVm9kaeqGFFb/U78Q2zOabmhF9ctYt3xBW0nWnQ==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      '@azure-rest/core-client': 1.4.0
+      '@azure/core-auth': 1.8.0
+      '@azure/core-rest-pipeline': 1.17.0
+      '@azure/core-sse': 2.1.3
+      '@azure/core-util': 1.10.0
+      '@azure/logger': 1.1.4
+      tslib: 2.7.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@babel/code-frame@7.25.7:
     resolution: {integrity: sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==}
     engines: {node: '>=6.9.0'}
diff --git a/src/components/ChatBox/ContactHeader.tsx b/src/components/ChatBox/ContactHeader.tsx
index 18fe0eb..9ea3a73 100644
--- a/src/components/ChatBox/ContactHeader.tsx
+++ b/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
               })}
diff --git a/src/components/ChatBox/InputBox.tsx b/src/components/ChatBox/InputBox.tsx
index a291f34..d41a0d4 100644
--- a/src/components/ChatBox/InputBox.tsx
+++ b/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={{
diff --git a/src/components/ChatBox/Markdown.tsx b/src/components/ChatBox/Markdown.tsx
index 3c6ec79..c633c76 100644
--- a/src/components/ChatBox/Markdown.tsx
+++ b/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 (
diff --git a/src/components/Configuration/TextCompletion.tsx b/src/components/Configuration/Completion.tsx
similarity index 91%
rename from src/components/Configuration/TextCompletion.tsx
rename to src/components/Configuration/Completion.tsx
index fbe3bed..1dbca7e 100644
--- a/src/components/Configuration/TextCompletion.tsx
+++ b/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)
diff --git a/src/components/Configuration/index.ts b/src/components/Configuration/index.ts
index 652a917..cb4fb58 100644
--- a/src/components/Configuration/index.ts
+++ b/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
 }
diff --git a/src/components/Sidebar/Items.tsx b/src/components/Sidebar/Items.tsx
index 8068460..9019b18 100644
--- a/src/components/Sidebar/Items.tsx
+++ b/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} />
     ),
diff --git a/src/configurations/textCompletion.ts b/src/configurations/completion.ts
similarity index 86%
rename from src/configurations/textCompletion.ts
rename to src/configurations/completion.ts
index b6cbab5..19d4ad2 100644
--- a/src/configurations/textCompletion.ts
+++ b/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,
diff --git a/src/configurations/imageGeneration.ts b/src/configurations/imageGeneration.ts
index 14726ce..a7baa10 100644
--- a/src/configurations/imageGeneration.ts
+++ b/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'][] = [
diff --git a/src/configurations/index.ts b/src/configurations/index.ts
index 3086f3f..33f3365 100644
--- a/src/configurations/index.ts
+++ b/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,
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 0384b39..20991ec 100644
--- a/src/hooks/index.ts
+++ b/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
 }
diff --git a/src/hooks/useAppData.ts b/src/hooks/useAppData.ts
index a7b3947..f5a96cc 100644
--- a/src/hooks/useAppData.ts
+++ b/src/hooks/useAppData.ts
@@ -27,9 +27,13 @@ const useAppData = () => {
   const saveFileToAppDataDir = async (file: File) => {
     const hashName = generateHashName(file.name)
     await mkdir('data', { baseDir: BaseDirectory.AppData, recursive: true })
-    await writeFile(`data/${hashName}`, await file.arrayBuffer() as Uint8Array, {
-      baseDir: BaseDirectory.AppData
-    })
+    await writeFile(
+      `data/${hashName}`,
+      (await file.arrayBuffer()) as Uint8Array,
+      {
+        baseDir: BaseDirectory.AppData
+      }
+    )
     return hashName
   }
 
diff --git a/src/hooks/useAudio.ts b/src/hooks/useAudio.ts
index 6a0e344..72a3473 100644
--- a/src/hooks/useAudio.ts
+++ b/src/hooks/useAudio.ts
@@ -3,23 +3,23 @@ import { Uploadable } from 'openai/src/uploads'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { AudioTranscriptionConfiguration } from 'src/configurations/audioTranscription'
 import { AudioTranslationConfiguration } from 'src/configurations/audioTranslation'
-import { useMessages, useOpenAI } from 'src/hooks'
+import { useClients, useMessages } from 'src/hooks'
 import { showApiRequestErrorToast } from 'src/shared/utils'
 import { currConversationState, loadingState } from 'src/stores/conversation'
 import { settingsState } from 'src/stores/settings'
-import { HashFile } from 'src/types/global'
+import { Companies, HashFile, Products } from 'src/types/global'
 
 const useAudio = (prompt: string, hashFile: HashFile | null) => {
+  const { openAiClient, azureClient } = useClients()
   const currConversation = useRecoilValue(currConversationState)
   const settings = useRecoilValue(settingsState)
   const setLoading = useSetRecoilState(loadingState)
-  const openai = useOpenAI()
   const { rollbackMessage, saveUserMessage, saveCommonAssistantMessage } =
     useMessages()
 
-  const createTranscription = async () => {
-    if (!hashFile || !settings || !currConversation) return
+  if (!hashFile || !settings || !currConversation) return
 
+  const createTranscriptionByOpenAI = async () => {
     const { model, temperature, language, responseFormat } =
       currConversation.configuration as AudioTranscriptionConfiguration
 
@@ -27,8 +27,7 @@ const useAudio = (prompt: string, hashFile: HashFile | null) => {
       saveUserMessage(prompt, 0, hashFile.hashName)
       setLoading(true)
 
-      // TODO: Uses pure fetch.
-      const transcription = await openai.audio.transcriptions.create({
+      const transcription = await openAiClient.audio.transcriptions.create({
         file: hashFile.file as Uploadable,
         model,
         prompt,
@@ -46,9 +45,7 @@ const useAudio = (prompt: string, hashFile: HashFile | null) => {
     }
   }
 
-  const createTranslation = async () => {
-    if (!hashFile || !settings || !currConversation) return
-
+  const createTranslationByOpenAI = async () => {
     const { model, temperature, responseFormat } =
       currConversation.configuration as AudioTranslationConfiguration
 
@@ -56,8 +53,7 @@ const useAudio = (prompt: string, hashFile: HashFile | null) => {
       saveUserMessage(prompt, 0, hashFile.hashName)
       setLoading(true)
 
-      // TODO: Uses pure fetch.
-      const translation = await openai.audio.translations.create({
+      const translation = await openAiClient.audio.translations.create({
         file: hashFile.file,
         model,
         prompt,
@@ -65,9 +61,64 @@ const useAudio = (prompt: string, hashFile: HashFile | null) => {
         temperature
       })
 
-      saveCommonAssistantMessage(
-        translation.text
+      saveCommonAssistantMessage(translation.text)
+    } catch (error) {
+      showApiRequestErrorToast()
+      rollbackMessage()
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const createTranscriptionByAzure = async () => {
+    const { temperature, language } =
+      currConversation.configuration as AudioTranscriptionConfiguration
+
+    try {
+      saveUserMessage(prompt, 0, hashFile.hashName)
+      setLoading(true)
+
+      const buffer = await hashFile.file.arrayBuffer()
+      const uint8Array = new Uint8Array(buffer)
+      const transcription = await azureClient.getAudioTranscription(
+        settings.azureDeploymentName,
+        uint8Array,
+        {
+          prompt,
+          temperature,
+          language: language === '' ? undefined : language
+        }
+      )
+
+      saveCommonAssistantMessage(transcription.text)
+    } catch (error) {
+      showApiRequestErrorToast()
+      rollbackMessage()
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const createTranslationByAzure = async () => {
+    const { temperature } =
+      currConversation.configuration as AudioTranslationConfiguration
+
+    try {
+      saveUserMessage(prompt, 0, hashFile.hashName)
+      setLoading(true)
+
+      const buffer = await hashFile.file.arrayBuffer()
+      const uint8Array = new Uint8Array(buffer)
+      const translation = await azureClient.getAudioTranslation(
+        settings.azureDeploymentName,
+        uint8Array,
+        {
+          prompt,
+          temperature
+        }
       )
+
+      saveCommonAssistantMessage(translation.text)
     } catch (error) {
       showApiRequestErrorToast()
       rollbackMessage()
@@ -76,7 +127,18 @@ const useAudio = (prompt: string, hashFile: HashFile | null) => {
     }
   }
 
-  return { createTranslation, createTranscription }
+  const services = {
+    [Companies.Azure]: {
+      [Products.AudioTranscription]: createTranscriptionByAzure,
+      [Products.AudioTranslation]: createTranslationByAzure
+    },
+    [Companies.OpenAI]: {
+      [Products.AudioTranscription]: createTranscriptionByOpenAI,
+      [Products.AudioTranslation]: createTranslationByOpenAI
+    }
+  }
+
+  return services[settings.company]
 }
 
 export default useAudio
diff --git a/src/hooks/useChatCompletion.ts b/src/hooks/useChatCompletion.ts
index 23eab9c..4f4731a 100644
--- a/src/hooks/useChatCompletion.ts
+++ b/src/hooks/useChatCompletion.ts
@@ -1,16 +1,21 @@
-import { ChatCompletionCreateParams } from 'openai/resources'
+import {
+  ChatCompletionChunk,
+  ChatCompletionCreateParams,
+  ChatCompletionMessageParam
+} from 'openai/resources'
+import { Stream } from 'openai/streaming'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
-import toast from 'src/components/Snackbar'
+import Toast from 'src/components/Snackbar'
 import { ChatConfiguration, models } from 'src/configurations/chatCompletion'
-import { useMessages, useServices, useSettings } from 'src/hooks'
+import { useClients, useMessages, useSettings } from 'src/hooks'
 import { getTokensCount } from 'src/shared/utils'
 import { currConversationState, loadingState } from 'src/stores/conversation'
-import { OpenAIChatResponse, OpenAIError } from 'src/types/openai'
+import { Companies } from 'src/types/global'
 
 const useChatCompletion = (prompt: string) => {
+  const { openAiClient, azureClient } = useClients()
   const currConversation = useRecoilValue(currConversationState)
   const { settings } = useSettings()
-  const services = useServices()
   const setLoading = useSetRecoilState(loadingState)
   const {
     rollbackMessage,
@@ -19,9 +24,9 @@ const useChatCompletion = (prompt: string) => {
     updateChatCompletionStream
   } = useMessages()
 
-  const createChatCompletion = async () => {
-    if (!settings || !currConversation) return
+  if (!settings || !currConversation) return
 
+  const createChatCompletionByAzure = async () => {
     const {
       model,
       systemMessage,
@@ -39,7 +44,7 @@ const useChatCompletion = (prompt: string) => {
       userMessageTokensCount + systemMessageTokensCount + maxTokens
     const tokensLimit = models.find((m) => m.name === model)?.tokensLimit || 0
     if (tokensCount > tokensLimit) {
-      toast.error(
+      Toast.error(
         `This model's maximum context length is ${tokensLimit} tokens. However, you requested ${tokensCount} tokens (${
           tokensCount - maxTokens
         } in the messages, ${maxTokens} in the completion). Please reduce the length of the prompt.`
@@ -62,100 +67,182 @@ const useChatCompletion = (prompt: string) => {
     setLoading(true)
     updateChatCompletionStream()
 
-    let chat: Response | undefined
+    const messages: ChatCompletionMessageParam[] = [
+      {
+        role: 'system',
+        content: systemMessage
+      },
+      ...context,
+      {
+        role: 'user',
+        content: prompt
+      }
+    ]
 
-    try {
-      chat = await services.chat_completion({
-        messages: [
-          {
-            role: 'system',
-            content: systemMessage
-          },
-          ...context,
-          {
-            role: 'user',
-            content: prompt
-          }
-        ],
-        model,
-        max_tokens: maxTokens,
-        temperature,
-        top_p: topP,
-        stop: stop.length > 0 ? stop : undefined,
-        frequency_penalty: frequencyPenalty,
-        presence_penalty: presencePenalty,
-        stream: true
-      })
-    } catch {
-      toast.error('Network Error.')
-      rollbackMessage()
-      setLoading(false)
-      return
+    const options = {
+      model,
+      max_tokens: maxTokens,
+      temperature,
+      top_p: topP,
+      stop: stop.length > 0 ? stop : undefined,
+      frequency_penalty: frequencyPenalty,
+      presence_penalty: presencePenalty
     }
 
-    const reader = chat.body?.getReader()
+    try {
+      const events = await azureClient.streamChatCompletions(
+        settings.azureDeploymentName,
+        messages,
+        options
+      )
+
+      for await (const event of events) {
+        for (const choice of event.choices) {
+          updateChatCompletionStream(choice.delta?.content || '')
+
+          const filterResults = choice.contentFilterResults
+          if (!filterResults) {
+            continue
+          }
+          if (filterResults.error) {
+            Toast.error(
+              `\tContent filter ran into an error ${filterResults.error.code}: ${filterResults.error.message}`
+            )
+          } else {
+            const { hate, sexual, selfHarm, violence } = filterResults
+
+            if (hate?.filtered) {
+              Toast.error(
+                `\tHate category is filtered: ${hate?.filtered}, with ${hate?.severity} severity`
+              )
+            }
+            if (sexual?.filtered) {
+              Toast.error(
+                `\tSexual category is filtered: ${sexual?.filtered}, with ${sexual?.severity} severity`
+              )
+            }
+            if (selfHarm?.filtered) {
+              Toast.error(
+                `\tSelf-harm category is filtered: ${selfHarm?.filtered}, with ${selfHarm?.severity} severity`
+              )
+            }
+            if (violence?.filtered) {
+              Toast.error(
+                `\tViolence category is filtered: ${violence?.filtered}, with ${violence?.severity} severity`
+              )
+            }
+          }
+        }
+      }
 
-    if (!reader) {
-      toast.error('Cannot get ReadableStream.')
+      saveAssistantMessage()
+    } catch (e) {
+      Toast.error(e as string)
       rollbackMessage()
+    } finally {
       setLoading(false)
-      return
     }
+  }
 
-    // The error which is throwing by OpenAI API.
-    if (chat.status !== 200) {
-      const { value } = await reader.read()
-      const decoder = new TextDecoder('utf-8')
-      const chunk = decoder.decode(value, { stream: true })
-      const errorData: OpenAIError = JSON.parse(chunk)
-      toast.error(errorData.error.message)
-      rollbackMessage()
-      setLoading(false)
+  const createChatCompletionByOpenAI = async () => {
+    const {
+      model,
+      systemMessage,
+      maxTokens,
+      temperature,
+      topP,
+      frequencyPenalty,
+      presencePenalty,
+      stop,
+      systemMessageTokensCount
+    } = currConversation.configuration as ChatConfiguration
+
+    const userMessageTokensCount = getTokensCount(prompt, model)
+    let tokensCount =
+      userMessageTokensCount + systemMessageTokensCount + maxTokens
+    const tokensLimit = models.find((m) => m.name === model)?.tokensLimit || 0
+    if (tokensCount > tokensLimit) {
+      Toast.error(
+        `This model's maximum context length is ${tokensLimit} tokens. However, you requested ${tokensCount} tokens (${
+          tokensCount - maxTokens
+        } in the messages, ${maxTokens} in the completion). Please reduce the length of the prompt.`
+      )
       return
     }
+    const context: ChatCompletionCreateParams['messages'] = []
+    currConversation.messages
+      .slice()
+      .reverse()
+      .forEach(({ tokensCount: historyTokensCount, content, role }) => {
+        tokensCount += historyTokensCount
+        if (tokensCount > tokensLimit) return
+        context.unshift({
+          role,
+          content
+        })
+      })
+    saveUserMessage(prompt, userMessageTokensCount)
+    setLoading(true)
+    updateChatCompletionStream()
 
-    const decoder = new TextDecoder('utf-8')
-    const read = async (): Promise<void> => {
-      try {
-        const { done, value } = await reader.read()
+    const messages: ChatCompletionMessageParam[] = [
+      {
+        role: 'system',
+        content: systemMessage
+      },
+      ...context,
+      {
+        role: 'user',
+        content: prompt
+      }
+    ]
 
-        if (done) {
-          saveAssistantMessage()
-          setLoading(false)
-          return reader.releaseLock()
-        }
+    const options = {
+      model,
+      max_tokens: maxTokens,
+      temperature,
+      top_p: topP,
+      stop: stop.length > 0 ? stop : undefined,
+      frequency_penalty: frequencyPenalty,
+      presence_penalty: presencePenalty
+    }
 
-        const chunk = decoder.decode(value, { stream: true })
-        const chunks: OpenAIChatResponse[] = chunk
-          .split('data:')
-          .map((data) => {
-            const trimData = data.trim()
-            if (trimData === '') return undefined
-            if (trimData === '[DONE]') return undefined
-            return JSON.parse(data.trim())
-          })
-          .filter((data) => data)
-        chunks.forEach((data) => {
-          const token = data.choices[0].delta.content
-
-          if (token !== undefined) {
-            updateChatCompletionStream(token)
+    try {
+      const events = (await openAiClient.chat.completions.create({
+        messages,
+        ...options,
+        stream: true
+      })) as unknown as Stream<ChatCompletionChunk>
+
+      if (events)
+        for await (const event of events) {
+          for (const choice of event.choices) {
+            updateChatCompletionStream(choice.delta?.content || '')
+
+            if (choice.delta.refusal) {
+              continue
+            }
+            if (choice.delta.refusal) {
+              Toast.error(choice.delta.refusal)
+            }
           }
-        })
+        }
 
-        return read()
-      } catch {
-        toast.error('Stream data parsing error.')
-        rollbackMessage()
-        setLoading(false)
-      }
+      saveAssistantMessage()
+    } catch (e) {
+      Toast.error(e as string)
+      rollbackMessage()
+    } finally {
+      setLoading(false)
     }
+  }
 
-    await read()
-    reader.releaseLock()
+  const services = {
+    [Companies.Azure]: createChatCompletionByAzure,
+    [Companies.OpenAI]: createChatCompletionByOpenAI
   }
 
-  return { createChatCompletion }
+  return services[settings.company]
 }
 
 export default useChatCompletion
diff --git a/src/hooks/useClients.ts b/src/hooks/useClients.ts
new file mode 100644
index 0000000..1f0fec6
--- /dev/null
+++ b/src/hooks/useClients.ts
@@ -0,0 +1,22 @@
+import { AzureKeyCredential, OpenAIClient } from '@azure/openai'
+import { OpenAI } from 'openai'
+import { useSettings } from 'src/hooks'
+
+const useClients = () => {
+  const { settings } = useSettings()
+
+  const openAiClient = new OpenAI({
+    apiKey: settings?.openaiSecretKey || '',
+    organization: settings?.openaiOrganizationId,
+    dangerouslyAllowBrowser: true
+  })
+
+  const azureClient = new OpenAIClient(
+    settings?.azureEndPoint || '',
+    new AzureKeyCredential(settings?.azureSecretKey || '')
+  )
+
+  return { openAiClient, azureClient }
+}
+
+export default useClients
diff --git a/src/hooks/useCompletion.ts b/src/hooks/useCompletion.ts
new file mode 100644
index 0000000..c1bf545
--- /dev/null
+++ b/src/hooks/useCompletion.ts
@@ -0,0 +1,98 @@
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+import { CompletionConfiguration } from 'src/configurations/completion'
+import { useClients, useMessages } from 'src/hooks'
+import { showApiRequestErrorToast } from 'src/shared/utils'
+import { currConversationState, loadingState } from 'src/stores/conversation'
+import { settingsState } from 'src/stores/settings'
+import { Companies } from 'src/types/global'
+
+const useCompletion = (prompt: string) => {
+  const { openAiClient, azureClient } = useClients()
+  const currConversation = useRecoilValue(currConversationState)
+  const setLoading = useSetRecoilState(loadingState)
+  const settings = useRecoilValue(settingsState)
+  const { rollbackMessage, saveUserMessage, saveCommonAssistantMessage } =
+    useMessages()
+
+  if (!settings || !currConversation) return
+
+  const {
+    model,
+    maxTokens,
+    temperature,
+    topP,
+    frequencyPenalty,
+    presencePenalty,
+    preResponse,
+    postResponse
+  } = currConversation.configuration as CompletionConfiguration
+
+  const createCompletionByOpenAI = async () => {
+    try {
+      saveUserMessage(prompt)
+      setLoading(true)
+
+      const completion = await openAiClient.completions.create({
+        model,
+        prompt,
+        max_tokens: maxTokens,
+        temperature,
+        top_p: topP,
+        frequency_penalty: frequencyPenalty,
+        presence_penalty: presencePenalty
+      })
+
+      const preResponseText = preResponse.checked ? preResponse.content : ''
+      const postResponseText = postResponse.checked ? postResponse.content : ''
+
+      saveCommonAssistantMessage(
+        preResponseText + (completion.choices[0].text || '') + postResponseText
+      )
+    } catch (error) {
+      showApiRequestErrorToast()
+      rollbackMessage()
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const createCompletionByAzure = async () => {
+    try {
+      saveUserMessage(prompt)
+      setLoading(true)
+
+      const completion = await azureClient.getCompletions(
+        settings.azureDeploymentName,
+        [prompt],
+        {
+          maxTokens,
+          temperature,
+          topP,
+          frequencyPenalty,
+          presencePenalty
+        }
+      )
+
+      const preResponseText = preResponse.checked ? preResponse.content : ''
+      const postResponseText = postResponse.checked ? postResponse.content : ''
+
+      saveCommonAssistantMessage(
+        preResponseText + (completion.choices[0].text || '') + postResponseText
+      )
+    } catch (error) {
+      showApiRequestErrorToast()
+      rollbackMessage()
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const services = {
+    [Companies.Azure]: createCompletionByAzure,
+    [Companies.OpenAI]: createCompletionByOpenAI
+  }
+
+  return services[settings.company]
+}
+
+export default useCompletion
diff --git a/src/hooks/useImageGeneration.ts b/src/hooks/useImageGeneration.ts
index 1281594..39241a3 100644
--- a/src/hooks/useImageGeneration.ts
+++ b/src/hooks/useImageGeneration.ts
@@ -1,39 +1,34 @@
-import { DateTime } from 'luxon'
-import { ImagesResponse } from 'openai/resources'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { ImageGenerationConfiguration } from 'src/configurations/imageGeneration'
-import { useMessages, useServices } from 'src/hooks'
+import { useClients, useMessages } from 'src/hooks'
 import { showApiRequestErrorToast } from 'src/shared/utils'
 import { currConversationState, loadingState } from 'src/stores/conversation'
 import { settingsState } from 'src/stores/settings'
-import { AzureImageGeneration } from 'src/types/azure'
 import { Companies } from 'src/types/global'
-import { sleep } from 'yancey-js-util'
 
 const useImageGeneration = (prompt: string) => {
+  const { openAiClient, azureClient } = useClients()
   const currConversation = useRecoilValue(currConversationState)
   const setLoading = useSetRecoilState(loadingState)
   const settings = useRecoilValue(settingsState)
-  const services = useServices()
   const { rollbackMessage, saveUserMessage, saveCommonAssistantMessage } =
     useMessages()
 
-  const createOpenAIImageGeneration = async () => {
-    if (!settings || !currConversation) return
+  if (!settings || !currConversation) return
 
+  const createImageGenerationByOpenAI = async () => {
     const { n, size, responseFormat } =
       currConversation.configuration as ImageGenerationConfiguration
 
     try {
       saveUserMessage(prompt)
       setLoading(true)
-      const response = await services.image_generation({
+      const image = await openAiClient.images.generate({
         prompt,
         n,
         size,
         response_format: responseFormat
       })
-      const image = (await response.json()) as ImagesResponse
 
       const content = image.data
         .map((val, key) => `![${prompt}-${key}](${val.url})\n`)
@@ -48,50 +43,26 @@ const useImageGeneration = (prompt: string) => {
     }
   }
 
-  const createAzureImageGeneration = async () => {
-    if (!settings || !currConversation) return
-
-    const { n, size } =
+  const createImageGenerationByAzure = async () => {
+    const { n, size, responseFormat } =
       currConversation.configuration as ImageGenerationConfiguration
 
     try {
       saveUserMessage(prompt)
       setLoading(true)
-
-      const submission = await services.image_generation({
-        prompt: prompt,
-        n,
-        size
-      })
-
-      const operation_location = submission.headers.get('Operation-Location')
-      if (!operation_location) throw new Error('No Operation Location found.')
-      let retry_after = Number(submission.headers.get('Retry-after')) * 1000
-      let image: AzureImageGeneration | null = null
-
-      while (image?.status !== 'succeeded') {
-        sleep(retry_after)
-
-        const response = await fetch(operation_location, {
-          headers: {
-            'Content-Type': 'application/json',
-            'api-key': settings.azureSecretKey
-          },
-          method: 'GET'
-        })
-        retry_after = Number(response.headers.get('Retry-after')) * 1000
-        image = (await response.json()) as AzureImageGeneration
-      }
-
-      let content = ''
-      image.result.data.forEach(
-        (image) => (content += `![${prompt}](${image.url})\n\n`)
+      const image = await azureClient.getImages(
+        settings.azureDeploymentName,
+        prompt,
+        {
+          n,
+          size,
+          responseFormat
+        }
       )
-      content += `(Warning: The expiration date of this image is **${DateTime.fromSeconds(
-        image.expires
-      ).toLocaleString(
-        DateTime.DATETIME_SHORT_WITH_SECONDS
-      )}**, please download as soon as possible.)`
+
+      const content = image.data
+        .map((val, key) => `![${prompt}-${key}](${val.url})\n`)
+        .join('')
 
       saveCommonAssistantMessage(content)
     } catch {
@@ -102,9 +73,12 @@ const useImageGeneration = (prompt: string) => {
     }
   }
 
-  return settings?.company === Companies.OpenAI
-    ? { createImageGeneration: createOpenAIImageGeneration }
-    : { createImageGeneration: createAzureImageGeneration }
+  const services = {
+    [Companies.Azure]: createImageGenerationByAzure,
+    [Companies.OpenAI]: createImageGenerationByOpenAI
+  }
+
+  return services[settings.company]
 }
 
 export default useImageGeneration
diff --git a/src/hooks/useOpenAI.ts b/src/hooks/useOpenAI.ts
deleted file mode 100644
index 073c404..0000000
--- a/src/hooks/useOpenAI.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { OpenAI } from 'openai'
-import { useSettings } from 'src/hooks'
-
-const useOpenAI = () => {
-  const { settings } = useSettings()
-
-  const openai = new OpenAI({
-    apiKey: settings?.openaiSecretKey || '',
-    organization: settings?.openaiOrganizationId,
-    dangerouslyAllowBrowser: true
-  })
-
-  return openai
-}
-
-export default useOpenAI
diff --git a/src/hooks/useRequest.ts b/src/hooks/useRequest.ts
index 5175ba8..fbb8149 100644
--- a/src/hooks/useRequest.ts
+++ b/src/hooks/useRequest.ts
@@ -1,23 +1,23 @@
 import {
   useAudio,
   useChatCompletion,
-  useImageGeneration,
-  useTextCompletion
+  useCompletion,
+  useImageGeneration
 } from 'src/hooks'
 import { HashFile, Products } from 'src/types/global'
 
 const useRequest = (prompt: string, hashFile: HashFile) => {
-  const { createChatCompletion } = useChatCompletion(prompt)
-  const { createTextCompletion } = useTextCompletion(prompt)
-  const { createImageGeneration } = useImageGeneration(prompt)
-  const { createTranscription, createTranslation } = useAudio(prompt, hashFile)
+  const chatCompletion = useChatCompletion(prompt)
+  const completion = useCompletion(prompt)
+  const imageGeneration = useImageGeneration(prompt)
+  const audio = useAudio(prompt, hashFile)
 
   const requests = {
-    [Products.ChatCompletion]: createChatCompletion,
-    [Products.TextCompletion]: createTextCompletion,
-    [Products.AudioTranscription]: createTranscription,
-    [Products.AudioTranslation]: createTranslation,
-    [Products.ImageGeneration]: createImageGeneration
+    [Products.ChatCompletion]: chatCompletion,
+    [Products.Completion]: completion,
+    [Products.ImageGeneration]: imageGeneration,
+    [Products.AudioTranscription]: audio?.audioTranscription,
+    [Products.AudioTranslation]: audio?.audioTranslation
   }
 
   return requests
diff --git a/src/hooks/useSevices.ts b/src/hooks/useSevices.ts
deleted file mode 100644
index 70060a3..0000000
--- a/src/hooks/useSevices.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import {
-  ChatCompletionCreateParams,
-  CompletionCreateParams,
-  ImageGenerateParams,
-} from 'openai/resources'
-import {
-  OPENAI_CHAT_COMPLETION_URL,
-  OPENAI_IMAGE_GENERATION_URL,
-  OPENAI_TEXT_COMPLETION_URL
-} from 'src/shared/constants'
-import { Companies, Products } from 'src/types/global'
-import useSettings from './useSettings'
-
-const useServices = () => {
-  const { settings } = useSettings()
-
-  const _fetch = <T>(url: string, body: T) => {
-    const headers = {
-      [Companies.Azure]: {
-        'api-key': settings?.azureSecretKey || ''
-      },
-      [Companies.OpenAI]: {
-        Authorization: `Bearer ${settings?.openaiSecretKey}`,
-        'OpenAI-Organization': settings?.openaiOrganizationId || ''
-      }
-    }
-
-    return fetch(url, {
-      headers: {
-        'Content-Type': 'application/json',
-        ...headers[settings?.company || Companies.OpenAI]
-      },
-      method: 'POST',
-      body: body instanceof FormData ? body : JSON.stringify(body)
-    })
-  }
-
-  const company = {
-    [Companies.Azure]: {
-      [Products.ChatCompletion]: (body: ChatCompletionCreateParams) =>
-        _fetch(
-          `${settings?.azureEndPoint}/openai/deployments/${settings?.azureDeploymentName}/chat/completions?api-version=2023-03-15-preview`,
-          body
-        ),
-      [Products.TextCompletion]: (body: CompletionCreateParams) =>
-        _fetch(
-          `${settings?.azureEndPoint}/openai/deployments/${settings?.azureDeploymentName}/completions?api-version=2022-12-01`,
-          body
-        ),
-      [Products.ImageGeneration]: (body: ImageGenerateParams) =>
-        _fetch(
-          `${settings?.azureEndPoint}/openai/images/generations:submit?api-version=2023-06-01-preview`,
-          body
-        )
-    },
-    [Companies.OpenAI]: {
-      [Products.ChatCompletion]: (body: ChatCompletionCreateParams) =>
-        _fetch(OPENAI_CHAT_COMPLETION_URL, body),
-      [Products.TextCompletion]: (body: CompletionCreateParams) =>
-        _fetch(OPENAI_TEXT_COMPLETION_URL, body),
-      [Products.ImageGeneration]: (body: ImageGenerateParams) =>
-        _fetch(OPENAI_IMAGE_GENERATION_URL, body)
-    }
-  }
-
-  return company[settings?.company || Companies.OpenAI]
-}
-
-export default useServices
diff --git a/src/hooks/useTextCompletion.ts b/src/hooks/useTextCompletion.ts
deleted file mode 100644
index 71860c8..0000000
--- a/src/hooks/useTextCompletion.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Completion } from 'openai/resources'
-import { useRecoilValue, useSetRecoilState } from 'recoil'
-import { TextCompletionConfiguration } from 'src/configurations/textCompletion'
-import { useMessages, useServices } from 'src/hooks'
-import { showApiRequestErrorToast } from 'src/shared/utils'
-import { currConversationState, loadingState } from 'src/stores/conversation'
-import { settingsState } from 'src/stores/settings'
-
-const useTextCompletion = (prompt: string) => {
-  const currConversation = useRecoilValue(currConversationState)
-  const setLoading = useSetRecoilState(loadingState)
-  const settings = useRecoilValue(settingsState)
-  const services = useServices()
-  const { rollbackMessage, saveUserMessage, saveCommonAssistantMessage } =
-    useMessages()
-
-  const createTextCompletion = async () => {
-    if (!settings || !currConversation) return
-
-    const {
-      model,
-      maxTokens,
-      temperature,
-      topP,
-      frequencyPenalty,
-      presencePenalty,
-      preResponse,
-      postResponse
-    } = currConversation.configuration as TextCompletionConfiguration
-
-    try {
-      saveUserMessage(prompt)
-      setLoading(true)
-
-      const response = await services.text_completion({
-        model,
-        prompt: prompt,
-        max_tokens: maxTokens,
-        temperature,
-        top_p: topP,
-        frequency_penalty: frequencyPenalty,
-        presence_penalty: presencePenalty
-      })
-      const completion: Completion = await response.json()
-
-      const preResponseText = preResponse.checked ? preResponse.content : ''
-      const postResponseText = postResponse.checked ? postResponse.content : ''
-
-      saveCommonAssistantMessage(
-        preResponseText + (completion.choices[0].text || '') + postResponseText
-      )
-    } catch (error) {
-      showApiRequestErrorToast()
-      rollbackMessage()
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return { createTextCompletion }
-}
-
-export default useTextCompletion
diff --git a/src/types/conversation.ts b/src/types/conversation.ts
index 7b63e35..f24736e 100644
--- a/src/types/conversation.ts
+++ b/src/types/conversation.ts
@@ -1,8 +1,8 @@
 import { AudioTranscriptionConfiguration } from '../configurations/audioTranscription'
 import { AudioTranslationConfiguration } from '../configurations/audioTranslation'
 import { ChatConfiguration } from '../configurations/chatCompletion'
+import { CompletionConfiguration } from '../configurations/completion'
 import { ImageGenerationConfiguration } from '../configurations/imageGeneration'
-import { TextCompletionConfiguration } from '../configurations/textCompletion'
 import { Products } from './global'
 
 export enum Roles {
@@ -33,5 +33,5 @@ export interface Conversation {
     | ImageGenerationConfiguration
     | AudioTranscriptionConfiguration
     | AudioTranslationConfiguration
-    | TextCompletionConfiguration
+    | CompletionConfiguration
 }
diff --git a/src/types/global.ts b/src/types/global.ts
index 0906d7c..d1eb6dd 100644
--- a/src/types/global.ts
+++ b/src/types/global.ts
@@ -14,11 +14,11 @@ export enum Companies {
 }
 
 export enum Products {
-  ChatCompletion = 'chat_completion',
-  TextCompletion = 'text_completion',
-  AudioTranscription = 'audio_transcription',
-  AudioTranslation = 'audio_translation',
-  ImageGeneration = 'image_generation'
+  ChatCompletion = 'chatCompletion',
+  Completion = 'completion',
+  AudioTranscription = 'audioTranscription',
+  AudioTranslation = 'audioTranslation',
+  ImageGeneration = 'imageGeneration'
 }
 
 export interface AlertError {