Skip to main content

Smash Chat Installation

How to add and enable the Smash AI Chat widget in your project.

Overview​

Smash AI Chat is included as a Git submodule in LibreApps Desktop. If you are using the full-kit, it is already installed and configured. If you are starting from scratch or using the starter-kit, follow these steps.

Installation Steps​

1. Initialize Submodules​

Ensure the Smash submodule is correctly initialized and updated.

git submodule update --init --recursive

2. Install Dependencies​

Run pnpm install to ensure all required packages for the widget are available.

pnpm install

3. Import the Component​

In your main layout or page file (e.g., src/app/[lang]/layout.tsx), import the Smash widget component.

import { SmashChatWidget } from '@/components/ai/smash-chat';

4. Add to JSX​

Place the component at the bottom of your layout to enable the floating chat widget.

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SmashChatWidget />
      </body>
    </html>
  );
}

Enabling via Rebrand Engine​

If you are using the rebrand engine, you can enable or disable the Smash widget via rebrand/settings.md:

## Widget Toggling
- [x] **Smash AI Chat**

Running ./scripts/build-rebrand.sh will then automatically inject or remove the widget from your build.

Best Practices​

  • ✅ Do this: Place the widget in your root layout to ensure it's available on all pages.
  • ✅ Do this: Use the rebrand engine to manage the widget's visibility across different builds.
  • ❌ Don't do this: Manually copy the Smash source code into your src/ directory; use the submodule to stay up to date.