Improve Default System Template (#3996)

* Feat [UI/UX] [Constant] [DEFAULT System Template] replace hardcoded

- [+] feat(constant.ts): replace hardcoded OpenAI with dynamic ServiceProvider variable in DEFAULT_SYSTEM_TEMPLATE

* Improve [UI/UX] [Chat] "fillTemplateWith"

- [+] feat(chat.ts): add DEFAULT_MODELS to modelConfig
- [+] fix(chat.ts): replace replaceAll with regex in output string replacement
- [+] refactor(chat.ts): use const instead of let for cutoff variable

app/constant.ts

@@ -95,7 +95,7 @@ export const Google = {
 
 export const DEFAULT_INPUT_TEMPLATE = `{{input}}`; // input / time / model / lang
 export const DEFAULT_SYSTEM_TEMPLATE = `
-You are ChatGPT, a large language model trained by OpenAI.
+You are ChatGPT, a large language model trained by {{ServiceProvider}}.
 Knowledge cutoff: {{cutoff}}
 Current model: {{model}}
 Current time: {{time}}

app/store/chat.ts

@@ -6,6 +6,7 @@ import { ModelConfig, ModelType, useAppConfig } from "./config";
 import { createEmptyMask, Mask } from "./mask";
 import {
   DEFAULT_INPUT_TEMPLATE,
+  DEFAULT_MODELS,
   DEFAULT_SYSTEM_TEMPLATE,
   KnowledgeCutOffDate,
   ModelProvider,
@@ -91,10 +92,17 @@ function countMessages(msgs: ChatMessage[]) {
 }
 
 function fillTemplateWith(input: string, modelConfig: ModelConfig) {
-  let cutoff =
-    KnowledgeCutOffDate[modelConfig.model] ?? KnowledgeCutOffDate.default;
+  const cutoff = KnowledgeCutOffDate[modelConfig.model] ?? KnowledgeCutOffDate.default;
+  // Find the model in the DEFAULT_MODELS array that matches the modelConfig.model
+  const modelInfo = DEFAULT_MODELS.find(m => m.name === modelConfig.model);
+  if (!modelInfo) {
+    throw new Error(`Model ${modelConfig.model} not found in DEFAULT_MODELS array.`);
+  }
+  // Directly use the providerName from the modelInfo
+  const serviceProvider = modelInfo.provider.providerName;
 
   const vars = {
+    ServiceProvider: serviceProvider,
     cutoff,
     model: modelConfig.model,
     time: new Date().toLocaleString(),
@@ -111,7 +119,8 @@ function fillTemplateWith(input: string, modelConfig: ModelConfig) {
   }
 
   Object.entries(vars).forEach(([name, value]) => {
-    output = output.replaceAll(`{{${name}}}`, value);
+    const regex = new RegExp(`{{${name}}}`, 'g');
+    output = output.replace(regex, value.toString()); // Ensure value is a string
   });
 
   return output;