Improve the Api (/api/chat) payload

pages/api/chat.ts

@@ -1,8 +1,6 @@
 import type { NextRequest } from 'next/server';
 import { createParser, ParsedEvent, ReconnectInterval } from 'eventsource-parser';
 
-import { UiMessage } from '../../components/ChatMessage';
-
 
 if (!process.env.OPENAI_API_KEY)
   console.warn('OPENAI_API_KEY has not been provided in this deployment environment. ' +
@@ -11,7 +9,7 @@ if (!process.env.OPENAI_API_KEY)
 
 // definition for OpenAI wire types
 
-interface ChatMessage {
+export interface ChatMessage {
   role: 'assistant' | 'system' | 'user';
   content: string;
 }
@@ -134,7 +132,7 @@ async function OpenAIStream(apiKey: string, payload: Omit<ChatCompletionsRequest
 export interface ChatApiInput {
   apiKey?: string;
   model: string;
-  messages: UiMessage[];
+  messages: ChatMessage[];
   temperature?: number;
   max_tokens?: number;
 }
@@ -152,10 +150,6 @@ export default async function handler(req: NextRequest) {
 
   // read inputs
   const { apiKey: userApiKey, model, messages, temperature = 0.5, max_tokens = 2048 }: ChatApiInput = await req.json();
-  const chatGptInputMessages: ChatMessage[] = messages.map(({ role, text }) => ({
-    role: role,
-    content: text,
-  }));
 
   // select key
   const apiKey = userApiKey || process.env.OPENAI_API_KEY || '';
@@ -164,7 +158,7 @@ export default async function handler(req: NextRequest) {
 
   const stream: ReadableStream = await OpenAIStream(apiKey, {
     model,
-    messages: chatGptInputMessages,
+    messages,
     temperature,
     max_tokens,
   });

pages/index.tsx

@@ -7,6 +7,7 @@ import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
 import SmartToyTwoToneIcon from '@mui/icons-material/SmartToyTwoTone';
 
+import { ChatApiInput } from './api/chat';
 import { ChatGptModelData, isValidOpenAIApiKey, loadOpenAIApiKey, Settings } from '../components/Settings';
 import { ChatMessage, UiMessage } from '../components/ChatMessage';
 import { Composer } from '../components/Composer';
@@ -137,10 +138,19 @@ export default function Conversation() {
 
 
   const getBotMessageStreaming = async (messages: UiMessage[]) => {
+    const payload: ChatApiInput = {
+      apiKey: loadOpenAIApiKey(),
+      model: chatModel,
+      messages: messages.map(({ role, text }) => ({
+        role: role,
+        content: text,
+      })),
+    };
+
     const response = await fetch('/api/chat', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ apiKey: loadOpenAIApiKey(), model: chatModel, messages: messages }),
+      body: JSON.stringify(payload),
     });
 
     if (response.body) {