👋 feat: Optional Greeting Heading and Footer-Free Welcome Screen (#17055)

Author: berry-13

api/server/experimental.js

@@ -543,6 +543,7 @@ if (cluster.isMaster) {
        so the answer is the deployment's base configuration, like index.js. */
     indexHTML = injectConfiguredFooterBootstrap(indexHTML, {
       customFooter: process.env.CUSTOM_FOOTER,
+      landingFooter: baseAppConfig?.interfaceConfig?.landingFooter,
     });
 
     indexHTML = injectColorModeHandoff(indexHTML, baseAppConfig?.interfaceConfig?.colorModeFromUrl);

api/server/index.js

@@ -301,6 +301,7 @@ const startServer = async () => {
      caller's and the client prefers it. */
   indexHTML = injectConfiguredFooterBootstrap(indexHTML, {
     customFooter: process.env.CUSTOM_FOOTER,
+    landingFooter: appConfig?.interfaceConfig?.landingFooter,
   });
 
   indexHTML = injectColorModeHandoff(indexHTML, appConfig.interfaceConfig?.colorModeFromUrl);

client/src/common/types.ts

@@ -692,6 +692,9 @@ declare global {
       /** Whether this deployment configured footer content of its own, so the
        *  composer reserves the footer bar's band on its first frame. */
       hasConfiguredFooter?: boolean;
+      /** The deployment's `interface.landingFooter`, so the welcome screen does
+       *  not paint a footer the config is about to remove. */
+      landingFooter?: boolean;
     };
   }
 }

client/src/components/Chat/ChatView.tsx

@@ -24,6 +24,7 @@ import {
   useFileMapContext,
   ComposerRestoreProvider,
 } from '~/Providers';
+import Footer, { useLandingFooter, useConfiguredFooter } from './Footer';
 import { QueuedTurnPortalProvider } from './Steering/QueuedTurnPortal';
 import { useChatSettings } from '~/Providers/ChatSettingsContext';
 import ApprovalProvider from './Messages/Content/ApprovalContext';
@@ -33,7 +34,6 @@ import ProjectBadge from '~/components/Projects/ProjectBadge';
 import { composerLiftFamily } from './Input/Composer/state';
 import { OwnerTextProvider } from './Messages/PrivateText';
 import { useGetMessagesByConvoId } from '~/data-provider';
-import Footer, { useConfiguredFooter } from './Footer';
 import { AskAnswerHostProvider } from './ask/state';
 import MessagesView from './Messages/MessagesView';
 import Presentation from './Presentation';
@@ -86,6 +86,7 @@ function ChatView({
    *  composer's clearance has to account for the bar when it does — including
    *  before the config answers, so a cold load does not jump. */
   const configuredFooter = useConfiguredFooter();
+  const landingFooter = useLandingFooter();
 
   /** Room an open composer popover needs below the composer; see the atom. */
   const composerLift = useAtomValue(composerLiftFamily(index));
@@ -149,11 +150,10 @@ function ChatView({
     (!messagesTree || messagesTree.length === 0) &&
     (conversationId === Constants.NEW_CONVO || !conversationId);
 
-  /** A footer bar renders beneath the composer on the welcome screen always, and
-   *  in a conversation when the deployment configured one. The shell already
-   *  carried that answer, so this is the same value before and after the config
-   *  resolves. */
-  const footerBelow = isLandingPage || configuredFooter;
+  /** The welcome screen carries the full footer unless the deployment turned it
+   *  off; otherwise a footer bar renders only for configured content. */
+  const fullFooter = isLandingPage && landingFooter;
+  const footerBelow = fullFooter || configuredFooter;
   const isNavigating = (!messagesTree || messagesTree.length === 0) && conversationId != null;
   const isProjectLandingPage = isLandingPage && project != null;
 
@@ -280,15 +280,15 @@ function ChatView({
                             {/* The generic disclaimer and the policy links are the
                               welcome screen's; a deployment's own footer stays
                               with the conversation that always showed it. */}
-                            {!isLandingPage && configuredFooter && <Footer configuredOnly />}
+                            {!fullFooter && configuredFooter && <Footer configuredOnly />}
                           </div>
                           <Lia
                             bandRef={composerBandRef}
                             landing={isLandingPage}
                             submission={rootSubmission}
                           />
                         </div>
-                        {isLandingPage && <Footer />}
+                        {fullFooter && <Footer />}
                       </>
                     </TraceSurface>
                   </Presentation>

client/src/components/Chat/Footer.tsx

@@ -53,6 +53,21 @@ export function useConfiguredFooter(): boolean {
   return isSuccess ? hasConfiguredFooter(config) : shellHasConfiguredFooter;
 }
 
+/** The deployment's `interface.landingFooter`, as the server said when it served
+ *  this document. A shell that carries no answer reads as the default: on. */
+const shellLandingFooter =
+  typeof window === 'undefined' || window.__LIBRECHAT_CONFIG__?.landingFooter !== false;
+
+/** Whether the welcome screen carries the generic disclaimer and policy links.
+ *  Off, it keeps only a configured footer, the same as a conversation. Until
+ *  `/api/config` answers, the shell's answer holds, so a cold load lays the
+ *  welcome screen out once instead of dropping a footer it painted. */
+export function useLandingFooter(): boolean {
+  const { data: config, isSuccess } = useGetStartupConfig();
+
+  return isSuccess ? config?.interface?.landingFooter !== false : shellLandingFooter;
+}
+
 function Footer({ className, startupConfig, configuredOnly = false }: FooterProps) {
   const shouldFetchConfig = startupConfig === undefined;
   const { data: fetchedConfig } = useGetStartupConfig({ enabled: shouldFetchConfig });

client/src/components/Chat/Input/ChatForm.tsx

@@ -77,6 +77,7 @@ import PromptsCommand from './PromptsCommand';
 import { submitFromComposer } from './submit';
 import SkillsCommand from './SkillsCommand';
 import AutoPlayAudio from './AutoPlayAudio';
+import composerClearance from './clearance';
 import Waveform from './Composer/Waveform';
 import { mainTextareaId } from '~/common';
 import CollapseChat from './CollapseChat';
@@ -712,22 +713,11 @@ const ChatForm = memo(function ChatForm({
     [isCollapsed],
   );
 
-  /* From `sm` up the band leaves room under itself for the disclaimer, which only
-     the landing page carries — doubled while the centred landing composer floats,
-     and dropped back the moment a submission starts the thread. A started
-     conversation has nothing beneath it, so it keeps only enough to clear the
-     surface's own shadow. Below `sm` the composer runs to the viewport floor in
-     every state. */
-  const landingClearance =
-    centerFormOnLanding && !isSubmitting ? 'transition-all duration-200 sm:mb-28' : 'sm:mb-10';
-  let bottomClearance = 'sm:mb-4';
-  if (isLandingPage) {
-    bottomClearance = landingClearance;
-  } else if (footerBelow) {
-    /* A conversation that carries a configured footer keeps the band that bar
-       needs, exactly as the welcome screen does. */
-    bottomClearance = 'sm:mb-10';
-  }
+  const bottomClearance = composerClearance({
+    isLandingPage,
+    footerBelow,
+    floating: centerFormOnLanding && !isSubmitting,
+  });
 
   /** Answer mode, then during-run steering or queueing (a run in flight, or a
    *  queued follow-up about to start), then an ordinary send: the same route

client/src/components/Chat/Input/__tests__/clearance.spec.ts

@@ -0,0 +1,30 @@
+import composerClearance from '../clearance';
+
+describe('composerClearance', () => {
+  test('reserves the footer band on the welcome screen, doubled while the composer floats', () => {
+    expect(composerClearance({ isLandingPage: true, footerBelow: true, floating: true })).toBe(
+      'transition-all duration-200 sm:mb-28',
+    );
+    expect(composerClearance({ isLandingPage: true, footerBelow: true, floating: false })).toBe(
+      'sm:mb-10',
+    );
+  });
+
+  test('drops the footer band on a welcome screen with no footer beneath it', () => {
+    expect(composerClearance({ isLandingPage: true, footerBelow: false, floating: true })).toBe(
+      'sm:mb-4',
+    );
+    expect(composerClearance({ isLandingPage: true, footerBelow: false, floating: false })).toBe(
+      'sm:mb-4',
+    );
+  });
+
+  test('reserves the band in a conversation only for a configured footer', () => {
+    expect(composerClearance({ isLandingPage: false, footerBelow: true, floating: false })).toBe(
+      'sm:mb-10',
+    );
+    expect(composerClearance({ isLandingPage: false, footerBelow: false, floating: false })).toBe(
+      'sm:mb-4',
+    );
+  });
+});

client/src/components/Chat/Input/clearance.ts

@@ -0,0 +1,25 @@
+/**
+ * Room the composer band leaves beneath itself from `sm` up. A footer bar sits
+ * there whenever `footerBelow` holds, and the band reserves it: doubled while
+ * the centred landing composer floats, dropped back the moment a submission
+ * starts the thread. With no bar beneath it, the band keeps only enough to
+ * clear the surface's own shadow, on the welcome screen as in a conversation.
+ * Below `sm` the composer runs to the viewport floor in every state.
+ */
+export default function composerClearance({
+  isLandingPage,
+  footerBelow,
+  floating,
+}: {
+  isLandingPage: boolean;
+  footerBelow: boolean;
+  floating: boolean;
+}): string {
+  if (!footerBelow) {
+    return 'sm:mb-4';
+  }
+  if (isLandingPage && floating) {
+    return 'transition-all duration-200 sm:mb-28';
+  }
+  return 'sm:mb-10';
+}

client/src/components/Chat/Landing.tsx

@@ -64,7 +64,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
     });
   }, [conversation?.endpoint, conversation?.iconURL, endpointsConfig]);
 
-  const { entity, isAgent, isAssistant } = getEntity({
+  const { entity, isAgent } = getEntity({
     endpoint: endpointType,
     agentsMap,
     assistantMap,
@@ -79,7 +79,10 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
 
   const brandedSpecLabel = modelSpec?.showOnLanding ? modelSpec.label : '';
   const brandedSpecDescription = (modelSpec?.showOnLanding && modelSpec.description) || '';
-  const name = isTemporary ? '' : (entity?.name ?? brandedSpecLabel);
+  const name =
+    isTemporary || startupConfig?.interface?.landingHeading === 'greeting'
+      ? ''
+      : (entity?.name ?? brandedSpecLabel);
   const description = isTemporary
     ? localize('com_ui_temporary_description')
     : ((entity?.description || brandedSpecDescription || conversation?.greeting) ?? '');
@@ -171,7 +174,7 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
               </TooltipAnchor>
             )}
           </div>
-          {((isAgent || isAssistant) && name) || name ? (
+          {name ? (
             <div className="flex flex-col items-center gap-0 p-2">
               <SplitText
                 key={`split-text-${name}`}

client/src/components/Chat/__tests__/ChatView.spec.tsx

@@ -46,10 +46,15 @@ jest.mock('../Presentation', () => ({
   default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }));
 jest.mock('../Header', () => ({ __esModule: true, default: () => <div /> }));
+let mockConfiguredFooter = false;
+let mockLandingFooter = true;
 jest.mock('../Footer', () => ({
   __esModule: true,
-  default: () => <div />,
-  useConfiguredFooter: () => false,
+  default: ({ configuredOnly }: { configuredOnly?: boolean }) => (
+    <div data-testid={configuredOnly ? 'configured-footer' : 'landing-footer'} />
+  ),
+  useConfiguredFooter: () => mockConfiguredFooter,
+  useLandingFooter: () => mockLandingFooter,
 }));
 jest.mock('../Landing', () => ({ __esModule: true, default: () => <div /> }));
 jest.mock('~/components/Lia', () => ({ __esModule: true, default: () => null }));
@@ -213,3 +218,48 @@ describe('ChatView draft saving', () => {
     expect(mockAskHostSaveDrafts).toHaveBeenLastCalledWith(saveDrafts);
   });
 });
+
+describe('ChatView landing footer', () => {
+  beforeEach(() => {
+    mockParams.mockReturnValue({});
+    mockConversation.mockReturnValue(null);
+    mockConfiguredFooter = false;
+    mockLandingFooter = true;
+    mockChatFormProps.mockClear();
+  });
+
+  test('renders the full footer beneath the welcome screen by default', () => {
+    render(<ChatView />);
+
+    expect(screen.getByTestId('landing-footer')).toBeInTheDocument();
+    expect(screen.queryByTestId('configured-footer')).not.toBeInTheDocument();
+    expect(mockChatFormProps).toHaveBeenLastCalledWith(
+      expect.objectContaining({ footerBelow: true }),
+    );
+  });
+
+  test('drops the welcome screen footer when the deployment turns it off', () => {
+    mockLandingFooter = false;
+
+    render(<ChatView />);
+
+    expect(screen.queryByTestId('landing-footer')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('configured-footer')).not.toBeInTheDocument();
+    expect(mockChatFormProps).toHaveBeenLastCalledWith(
+      expect.objectContaining({ footerBelow: false }),
+    );
+  });
+
+  test('keeps a configured footer on the welcome screen when the full footer is off', () => {
+    mockLandingFooter = false;
+    mockConfiguredFooter = true;
+
+    render(<ChatView />);
+
+    expect(screen.queryByTestId('landing-footer')).not.toBeInTheDocument();
+    expect(screen.getByTestId('configured-footer')).toBeInTheDocument();
+    expect(mockChatFormProps).toHaveBeenLastCalledWith(
+      expect.objectContaining({ footerBelow: true }),
+    );
+  });
+});