feat: add env vars to allow user config display bot and user icon

docker/.env.example

@@ -196,6 +196,12 @@ ENABLE_WEBSITE_JINAREADER=true
 ENABLE_WEBSITE_FIRECRAWL=true
 ENABLE_WEBSITE_WATERCRAWL=true
 
+# -------------------------------
+# Frontend Chat Configuration
+# --------------------------------
+HIDE_CHAT_USER_ICON=false
+HIDE_CHAT_BOT_ICON=false
+
 # ------------------------------
 # Database Configuration
 # The database uses PostgreSQL. Please use the public schema.

docker/docker-compose-template.yaml

@@ -80,6 +80,8 @@ services:
       ENABLE_WEBSITE_JINAREADER: ${ENABLE_WEBSITE_JINAREADER:-true}
       ENABLE_WEBSITE_FIRECRAWL: ${ENABLE_WEBSITE_FIRECRAWL:-true}
       ENABLE_WEBSITE_WATERCRAWL: ${ENABLE_WEBSITE_WATERCRAWL:-true}
+      HIDE_CHAT_USER_ICON: ${HIDE_CHAT_USER_ICON:-false}
+      HIDE_CHAT_BOT_ICON: ${HIDE_CHAT_BOT_ICON:-false}
   # The postgres database.
   db:
     image: postgres:15-alpine

docker/docker-compose.yaml

@@ -597,6 +597,8 @@ services:
       ENABLE_WEBSITE_JINAREADER: ${ENABLE_WEBSITE_JINAREADER:-true}
       ENABLE_WEBSITE_FIRECRAWL: ${ENABLE_WEBSITE_FIRECRAWL:-true}
       ENABLE_WEBSITE_WATERCRAWL: ${ENABLE_WEBSITE_WATERCRAWL:-true}
+      HIDE_CHAT_USER_ICON: ${HIDE_CHAT_USER_ICON:-false}
+      HIDE_CHAT_BOT_ICON: ${HIDE_CHAT_BOT_ICON:-false}
   # The postgres database.
   db:
     image: postgres:15-alpine

web/app/components/base/chat/chat/answer/index.tsx

@@ -19,6 +19,7 @@ import Citation from '@/app/components/base/chat/chat/citation'
 import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal/edit-item'
 import type { AppData } from '@/models/share'
 import AnswerIcon from '@/app/components/base/answer-icon'
+import { HIDE_CHAT_BOT_ICON } from '@/config'
 import cn from '@/utils/classnames'
 import { FileList } from '@/app/components/base/file-uploader'
 import ContentSwitch from '../content-switch'
@@ -109,14 +110,18 @@ const Answer: FC<AnswerProps> = ({
 
   return (
     <div className='mb-2 flex last:mb-0'>
-      <div className='relative h-10 w-10 shrink-0'>
-        {answerIcon || <AnswerIcon />}
-        {responding && (
-          <div className='absolute left-[-3px] top-[-3px] flex h-4 w-4 items-center rounded-full border-[0.5px] border-divider-subtle bg-background-section-burn pl-[6px] shadow-xs'>
-            <LoadingAnim type='avatar' />
+      {
+        !HIDE_CHAT_BOT_ICON && (
+          <div className='relative h-10 w-10 shrink-0'>
+            {answerIcon || <AnswerIcon />}
+            {responding && (
+              <div className='absolute left-[-3px] top-[-3px] flex h-4 w-4 items-center rounded-full border-[0.5px] border-divider-subtle bg-background-section-burn pl-[6px] shadow-xs'>
+                <LoadingAnim type='avatar' />
+              </div>
+            )}
           </div>
-        )}
-      </div>
+        )
+      }
       <div className='chat-answer-container group ml-4 w-0 grow pb-4' ref={containerRef}>
         <div className={cn('group relative pr-10', chatAnswerContainerInner)}>
           <div

web/app/components/base/chat/chat/question.tsx

@@ -14,6 +14,7 @@ import type { Theme } from '../embedded-chatbot/theme/theme-context'
 import { CssTransform } from '../embedded-chatbot/theme/utils'
 import ContentSwitch from './content-switch'
 import { User } from '@/app/components/base/icons/src/public/avatar'
+import { HIDE_CHAT_USER_ICON } from '@/config'
 import { Markdown } from '@/app/components/base/markdown'
 import { FileList } from '@/app/components/base/file-uploader'
 import ActionButton from '../../action-button'
@@ -162,15 +163,19 @@ const Question: FC<QuestionProps> = ({
         </div>
         <div className='mt-1 h-[18px]' />
       </div>
-      <div className='h-10 w-10 shrink-0'>
-        {
-          questionIcon || (
-            <div className='h-full w-full rounded-full border-[0.5px] border-black/5'>
-              <User className='h-full w-full' />
-            </div>
-          )
-        }
-      </div>
+      {
+        !HIDE_CHAT_USER_ICON && (
+          <div className='h-10 w-10 shrink-0'>
+            {
+              questionIcon || (
+                <div className='h-full w-full rounded-full border-[0.5px] border-black/5'>
+                  <User className='h-full w-full' />
+                </div>
+              )
+            }
+          </div>
+        )
+      }
     </div>
   )
 }

web/app/layout.tsx

@@ -48,6 +48,8 @@ const LocaleLayout = async ({
     [DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_JINAREADER]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER,
     [DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_FIRECRAWL]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL,
     [DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_WATERCRAWL]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL,
+    [DatasetAttr.DATA_PUBLIC_HIDE_CHAT_USER_ICON]: process.env.NEXT_PUBLIC_HIDE_CHAT_USER_ICON,
+    [DatasetAttr.DATA_PUBLIC_HIDE_CHAT_BOT_ICON]: process.env.NEXT_PUBLIC_HIDE_CHAT_BOT_ICON,
   }
 
   return (

web/config/index.ts

@@ -275,6 +275,9 @@ export const ENABLE_WEBSITE_JINAREADER = getBooleanConfig(process.env.NEXT_PUBLI
 export const ENABLE_WEBSITE_FIRECRAWL = getBooleanConfig(process.env.NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL, DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_FIRECRAWL, true)
 export const ENABLE_WEBSITE_WATERCRAWL = getBooleanConfig(process.env.NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL, DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_WATERCRAWL, false)
 
+export const HIDE_CHAT_USER_ICON = getBooleanConfig(process.env.NEXT_PUBLIC_HIDE_CHAT_USER_ICON, DatasetAttr.DATA_PUBLIC_HIDE_CHAT_USER_ICON, false)
+export const HIDE_CHAT_BOT_ICON = getBooleanConfig(process.env.NEXT_PUBLIC_HIDE_CHAT_BOT_ICON, DatasetAttr.DATA_PUBLIC_HIDE_CHAT_BOT_ICON, false)
+
 export const VALUE_SELECTOR_DELIMITER = '@@@'
 
 export const validPassword = /^(?=.*[a-zA-Z])(?=.*\d)\S{8,}$/

web/docker/entrypoint.sh

@@ -37,4 +37,6 @@ export NEXT_PUBLIC_LOOP_NODE_MAX_COUNT=${LOOP_NODE_MAX_COUNT}
 export NEXT_PUBLIC_MAX_PARALLEL_LIMIT=${MAX_PARALLEL_LIMIT}
 export NEXT_PUBLIC_MAX_ITERATIONS_NUM=${MAX_ITERATIONS_NUM}
 export NEXT_PUBLIC_MAX_TREE_DEPTH=${MAX_TREE_DEPTH}
+export NEXT_PUBLIC_HIDE_CHAT_USER_ICON=${HIDE_CHAT_USER_ICON:-false}
+export NEXT_PUBLIC_HIDE_CHAT_BOT_ICON=${HIDE_CHAT_BOT_ICON:-false}
 pm2 start /app/web/server.js --name dify-web --cwd /app/web -i ${PM2_INSTANCES} --no-daemon

web/types/feature.ts

@@ -120,4 +120,6 @@ export enum DatasetAttr {
   DATA_PUBLIC_ENABLE_WEBSITE_JINAREADER = 'data-public-enable-website-jinareader',
   DATA_PUBLIC_ENABLE_WEBSITE_FIRECRAWL = 'data-public-enable-website-firecrawl',
   DATA_PUBLIC_ENABLE_WEBSITE_WATERCRAWL = 'data-public-enable-website-watercrawl',
+  DATA_PUBLIC_HIDE_CHAT_USER_ICON = 'data-public-hide-chat-user-icon',
+  DATA_PUBLIC_HIDE_CHAT_BOT_ICON = 'data-public-hide-chat-bot-icon',
 }