diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx
index 53319bc5..a7478ce5 100644
--- a/src/pages/playground/components/ground-left.tsx
+++ b/src/pages/playground/components/ground-left.tsx
@@ -9,7 +9,11 @@ import React, {
   useRef,
   useState
 } from 'react';
-import { OpenAIViewCode, Roles, generateMessages } from '../config';
+import {
+  OpenAIViewCode,
+  Roles,
+  generateMessagesByListContent
+} from '../config';
 import { ChatParamsConfig } from '../config/params-config';
 import { MessageItem, MessageItemAction } from '../config/types';
 import { LLM_METAKEYS, llmInitialValues } from '../hooks/config';
@@ -86,10 +90,11 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   });
 
   const viewCodeMessage = useMemo(() => {
-    return generateMessages([
-      { role: Roles.System, content: systemMessage },
-      ...messageList
-    ]);
+    const resultList = systemMessage
+      ? [{ role: Roles.System, content: systemMessage }]
+      : [];
+    const list = generateMessagesByListContent([...messageList]);
+    return [...resultList, ...list];
   }, [messageList, systemMessage]);
 
   const handleSendMessage = (message: Omit<MessageItem, 'uid'>) => {
diff --git a/src/pages/playground/components/multiple-chat/model-item.tsx b/src/pages/playground/components/multiple-chat/model-item.tsx
index f9e3466d..de447f97 100644
--- a/src/pages/playground/components/multiple-chat/model-item.tsx
+++ b/src/pages/playground/components/multiple-chat/model-item.tsx
@@ -22,7 +22,11 @@ import React, {
   useState
 } from 'react';
 import 'simplebar-react/dist/simplebar.min.css';
-import { OpenAIViewCode, Roles, generateMessages } from '../../config';
+import {
+  OpenAIViewCode,
+  Roles,
+  generateMessagesByListContent
+} from '../../config';
 import CompareContext from '../../config/compare-context';
 import { ChatParamsConfig } from '../../config/params-config';
 import { MessageItem, ModelSelectionItem } from '../../config/types';
@@ -89,10 +93,11 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
   } = useChatCompletion(scroller);
 
   const viewCodeMessage = useMemo(() => {
-    return generateMessages([
-      { role: Roles.System, content: systemMessage },
-      ...messageList
-    ]);
+    const resultList = systemMessage
+      ? [{ role: Roles.System, content: systemMessage }]
+      : [];
+    const list = generateMessagesByListContent([...messageList]);
+    return [...resultList, ...list];
   }, [messageList, systemMessage]);
 
   const abortFetch = () => {
diff --git a/src/pages/playground/hooks/use-chat-completion.ts b/src/pages/playground/hooks/use-chat-completion.ts
index 2b6b9c02..fab2811d 100644
--- a/src/pages/playground/hooks/use-chat-completion.ts
+++ b/src/pages/playground/hooks/use-chat-completion.ts
@@ -3,7 +3,11 @@ import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
 import _ from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import { CHAT_API } from '../apis';
-import { Roles, extractErrorMessage, generateMessages } from '../config';
+import {
+  Roles,
+  extractErrorMessage,
+  generateMessagesByListContent
+} from '../config';
 import { MessageItem } from '../config/types';
 
 export default function useChatCompletion(
@@ -136,7 +140,7 @@ export default function useChatCompletion(
         ...currentMessageRef.current
       ];
 
-      const messages = generateMessages(messageParams);
+      const messages = generateMessagesByListContent(messageParams);
 
       const chatParams = {
         messages: messages,