♻️ Front-end services, hooks, chat page related constants and types are placed in specific files

Author: Phinease

frontend/app/[locale]/chat/components/chatHeader.tsx

@@ -8,7 +8,7 @@ import { BrainCircuit, Globe } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { languageOptions } from "@/lib/constants";
+import { languageOptions } from "@/const/constants";
 import { useLanguageSwitch } from "@/lib/language";
 import { useMemoryIndicator } from "@/hooks/useMemory";
 

frontend/app/[locale]/chat/internal/chatAttachment.tsx

@@ -1,3 +1,4 @@
+import { chatConfig } from "@/const/chatConfig";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ExternalLink } from "lucide-react";
@@ -126,61 +127,47 @@ const getFileIcon = (name: string, contentType?: string) => {
   }
 
   // Identify by extension name
-  switch (extension) {
     // Document file
-    case "pdf":
-      return <AiFillFilePdf size={iconSize} color="#e74c3c" />;
-    case "doc":
-    case "docx":
-      return <AiFillFileWord size={iconSize} color="#3498db" />;
-    case "txt":
-      return <AiFillFileText size={iconSize} color="#7f8c8d" />;
-    case "md":
-      return <AiFillFileMarkdown size={iconSize} color="#34495e" />;
-
-    // Table file
-    case "xls":
-    case "xlsx":
-    case "csv":
-      return <AiFillFileExcel size={iconSize} color="#27ae60" />;
-
-    // Presentation file
-    case "ppt":
-    case "pptx":
-      return <AiFillFilePpt size={iconSize} color="#e67e22" />;
+  if (chatConfig.fileIcons.pdf.includes(extension)) {
+    return <AiFillFilePdf size={iconSize} color="#e74c3c" />;
+  }
+  if (chatConfig.fileIcons.word.includes(extension)) {
+    return <AiFillFileWord size={iconSize} color="#3498db" />;
+  }
+  if (chatConfig.fileIcons.text.includes(extension)) {
+    return <AiFillFileText size={iconSize} color="#7f8c8d" />;
+  }
+  if (chatConfig.fileIcons.markdown.includes(extension)) {
+    return <AiFillFileMarkdown size={iconSize} color="#34495e" />;
+  }
+  // Table file
+  if (chatConfig.fileIcons.excel.includes(extension)) {
+    return <AiFillFileExcel size={iconSize} color="#27ae60" />;
+  }
+  // Presentation file
+  if (chatConfig.fileIcons.powerpoint.includes(extension)) {
+    return <AiFillFilePpt size={iconSize} color="#e67e22" />;
+  }
 
-    // Code file
-    case "html":
-    case "htm":
-      return <AiFillHtml5 size={iconSize} color="#e67e22" />;
-    case "css":
-    case "js":
-    case "ts":
-    case "jsx":
-    case "tsx":
-    case "php":
-    case "py":
-    case "java":
-    case "c":
-    case "cpp":
-    case "cs":
-      return <AiFillCode size={iconSize} color="#f39c12" />;
-    case "json":
-      return <AiFillCode size={iconSize} color="#f1c40f" />;
+  // Code file
+  if (chatConfig.fileIcons.html.includes(extension)) {
+    return <AiFillHtml5 size={iconSize} color="#e67e22" />;
+  }
+  if (chatConfig.fileIcons.code.includes(extension)) {
+    return <AiFillCode size={iconSize} color="#f39c12" />;
+  }
+  if (chatConfig.fileIcons.json.includes(extension)) {
+    return <AiFillCode size={iconSize} color="#f1c40f" />;
+  }
 
-    // Compressed file
-    case "zip":
-    case "rar":
-    case "7z":
-    case "tar":
-    case "gz":
-      return <AiFillFileZip size={iconSize} color="#f39c12" />;
+  // Compressed file
+  if (chatConfig.fileIcons.compressed.includes(extension)) {
+    return <AiFillFileZip size={iconSize} color="#f39c12" />;
+  }
 
     // Default file icon
-    default:
-      return <AiFillFileUnknown size={iconSize} color="#95a5a6" />;
-  }
-};
+    return <AiFillFileUnknown size={iconSize} color="#95a5a6" />;
+  };
 
 // Format file size
 const formatFileSize = (size: number): string => {
@@ -223,7 +210,7 @@ export function ChatAttachment({
         attachment.type === "image" ||
         (attachment.contentType &&
           attachment.contentType.startsWith("image/")) ||
-        ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp"].includes(extension);
+        chatConfig.imageExtensions.includes(extension);
 
       if (isImage) {
         // For images, use image processing logic
@@ -247,9 +234,7 @@ export function ChatAttachment({
           attachment.type === "image" ||
           (attachment.contentType &&
             attachment.contentType.startsWith("image/")) ||
-          ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp"].includes(
-            extension
-          );
+          chatConfig.imageExtensions.includes(extension);
 
         return (
           <div

frontend/app/[locale]/chat/internal/chatInterface.tsx

@@ -7,7 +7,8 @@ import { useRouter } from "next/navigation";
 import { v4 as uuidv4 } from "uuid";
 import { useTranslation } from "react-i18next";
 
-import { ROLE_ASSISTANT } from "@/const/agentConfig";
+import { ROLE_ASSISTANT} from "@/const/agentConfig";
+import { USER_ROLES } from "@/const/modelConfig";
 import { useConfig } from "@/hooks/useConfig";
 import { useAuth } from "@/hooks/useAuth";
 import { conversationService } from "@/services/conversationService";
@@ -293,7 +294,7 @@ export function ChatInterface() {
     // Create user message object
     const userMessage: ChatMessageType = {
       id: userMessageId,
-      role: "user",
+      role: USER_ROLES.USER,
       content: userMessageContent,
       timestamp: new Date(),
       attachments:
@@ -1013,7 +1014,7 @@ export function ChatInterface() {
 
             // Optimized processing logic: process messages by role one by one, maintain original order
             dialogMessages.forEach((dialog_msg, index) => {
-              if (dialog_msg.role === "user") {
+              if (dialog_msg.role === USER_ROLES.USER) {
                 const formattedUserMsg: ChatMessageType =
                   extractUserMsgFromResponse(
                     dialog_msg,
@@ -1156,7 +1157,7 @@ export function ChatInterface() {
 
           // Optimized processing logic: process messages by role one by one, maintain original order
           dialogMessages.forEach((dialog_msg, index) => {
-            if (dialog_msg.role === "user") {
+            if (dialog_msg.role === USER_ROLES.USER) {
               const formattedUserMsg: ChatMessageType =
                 extractUserMsgFromResponse(
                   dialog_msg,

frontend/app/[locale]/chat/internal/extractMsgFromHistoryResponse.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ROLE_ASSISTANT } from "@/const/agentConfig";
+import { chatConfig } from "@/const/chatConfig";
 import {
   ApiMessage,
   SearchResult,
@@ -68,13 +69,13 @@ export function extractAssistantMsgFromResponse(
   if (dialog_msg.message && Array.isArray(dialog_msg.message)) {
     dialog_msg.message.forEach((msg: ApiMessageItem) => {
       switch (msg.type) {
-        case "final_answer": {
+        case chatConfig.messageTypes.FINAL_ANSWER: {
           // process the final_answer content and identify the user break tag
           finalAnswer += processSpecialTag(msg.content, t);
           break;
         }
 
-        case "step_count": {
+        case chatConfig.messageTypes.STEP_COUNT: {
           // create a new step
           steps.push({
             id: `step-${steps.length + 1}`,
@@ -90,7 +91,7 @@ export function extractAssistantMsgFromResponse(
           break;
         }
 
-        case "model_output_thinking": {
+        case chatConfig.messageTypes.MODEL_OUTPUT_THINKING: {
           const currentStep = steps[steps.length - 1];
           if (currentStep) {
             const contentId = `model-${Date.now()}-${Math.random()
@@ -108,7 +109,7 @@ export function extractAssistantMsgFromResponse(
           break;
         }
 
-        case "execution_logs": {
+        case chatConfig.messageTypes.EXECUTION_LOGS: {
           const currentStep = steps[steps.length - 1];
           if (currentStep) {
             // create a new execution output
@@ -127,7 +128,7 @@ export function extractAssistantMsgFromResponse(
           break;
         }
 
-        case "error": {
+        case chatConfig.messageTypes.ERROR: {
           const currentStep = steps[steps.length - 1];
           if (currentStep) {
             // create the error content
@@ -145,7 +146,7 @@ export function extractAssistantMsgFromResponse(
           break;
         }
 
-        case "search_content_placeholder": {
+        case chatConfig.messageTypes.SEARCH_CONTENT_PLACEHOLDER: {
           const currentStep = steps[steps.length - 1];
           if (currentStep) {
             try {
@@ -184,15 +185,15 @@ export function extractAssistantMsgFromResponse(
           break;
         }
 
-        case "token_count": {
+        case chatConfig.messageTypes.TOKEN_COUNT: {
           const currentStep = steps[steps.length - 1];
           if (currentStep) {
             currentStep.metrics = msg.content;
           }
           break;
         }
 
-        case "card": {
+        case chatConfig.messageTypes.CARD: {
           const currentStep = steps[steps.length - 1];
           if (currentStep) {
             // create the card content
@@ -210,7 +211,7 @@ export function extractAssistantMsgFromResponse(
           break;
         }
 
-        case "tool": {
+        case chatConfig.messageTypes.TOOL: {
           const currentStep = steps[steps.length - 1];
           if (currentStep) {
             // create the tool call content