Theming et personnalisation

Theming et personnalisation

Un chat générique ne s’intègre pas dans votre produit. ChatKit offre un système de theming complet pour adapter chaque aspect visuel à votre charte graphique : couleurs, typographie, espacement, coins arrondis, et animations.

Le système de thème

ChatKit utilise un objet de thème qui contrôle tous les aspects visuels :

import { ChatProvider, ChatWindow, MessageInput } from "@openai/chatkit/react";

const monTheme = {
  colors: {
    primary: "#2563EB",        // Bleu principal
    primaryHover: "#1D4ED8",   // Bleu au survol
    background: "#0F172A",     // Fond sombre
    surface: "#1E293B",        // Surface des messages
    text: "#F8FAFC",           // Texte principal
    textSecondary: "#94A3B8",  // Texte secondaire
    border: "#334155",         // Bordures
    userBubble: "#2563EB",     // Bulle utilisateur
    agentBubble: "#1E293B",    // Bulle agent
    inputBackground: "#1E293B",
    inputBorder: "#475569",
  },
  typography: {
    fontFamily: "'Inter', sans-serif",
    fontSize: "14px",
    lineHeight: "1.6",
    messageFontSize: "15px",
  },
  spacing: {
    messagePadding: "12px 16px",
    messageGap: "8px",
    containerPadding: "16px",
  },
  borders: {
    radius: "12px",
    messageRadius: "16px",
    inputRadius: "24px",
  },
};

function ChatDeProduit() {
  return (
    <ChatProvider endpoint="/api/chat" theme={monTheme}>
      <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
        <ChatWindow />
        <MessageInput placeholder="Comment puis-je vous aider ?" />
      </div>
    </ChatProvider>
  );
}

Personnaliser les messages

Vous pouvez personnaliser le rendu de chaque message avec des composants custom :

import { ChatProvider, ChatWindow, MessageInput } from "@openai/chatkit/react";

function MessagePersonnalise({ message, isUser }) {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: isUser ? "flex-end" : "flex-start",
        marginBottom: "8px",
      }}
    >
      {!isUser && (
        <div style={{
          width: "32px",
          height: "32px",
          borderRadius: "50%",
          background: "#2563EB",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          marginRight: "8px",
          fontSize: "14px",
        }}>
          AI
        </div>
      )}
      <div
        style={{
          maxWidth: "70%",
          padding: "12px 16px",
          borderRadius: "16px",
          background: isUser ? "#2563EB" : "#1E293B",
          color: "#F8FAFC",
        }}
      >
        {message.content}
      </div>
    </div>
  );
}

function Chat() {
  return (
    <ChatProvider endpoint="/api/chat">
      <ChatWindow renderMessage={(msg) => (
        <MessagePersonnalise message={msg} isUser={msg.role === "user"} />
      )} />
      <MessageInput />
    </ChatProvider>
  );
}

Mode sombre et mode clair

ChatKit supporte les thèmes dynamiques :

import { useState } from "react";

const themeSombre = {
  colors: {
    background: "#0F172A",
    surface: "#1E293B",
    text: "#F8FAFC",
    primary: "#3B82F6",
  },
};

const themeClair = {
  colors: {
    background: "#FFFFFF",
    surface: "#F1F5F9",
    text: "#0F172A",
    primary: "#2563EB",
  },
};

function ChatAvecTheme() {
  const [modeNuit, setModeNuit] = useState(true);

  return (
    <ChatProvider endpoint="/api/chat" theme={modeNuit ? themeSombre : themeClair}>
      <button onClick={() => setModeNuit(!modeNuit)}>
        {modeNuit ? "Mode clair" : "Mode sombre"}
      </button>
      <ChatWindow />
      <MessageInput />
    </ChatProvider>
  );
}

Personnaliser la zone de saisie

La zone de saisie est souvent le premier point de contact visuel :

<MessageInput
  placeholder="Posez votre question sur nos services..."
  maxLength={2000}
  showCharCount={true}
  submitOnEnter={true}
  showAttachButton={false}
  style={{
    borderTop: "1px solid #334155",
    padding: "16px",
  }}
/>

CSS personnalisé

Pour un contrôle total, utilisez les classes CSS de ChatKit :

/* styles/chatkit-custom.css */

/* Conteneur principal */
.chatkit-container {
  font-family: 'Inter', sans-serif;
}

/* Messages de l'agent */
.chatkit-message--agent {
  background: linear-gradient(135deg, #1E293B, #0F172A);
  border: 1px solid rgba(59, 130, 246, 0.1);
}

/* Messages de l'utilisateur */
.chatkit-message--user {
  background: #2563EB;
  border-radius: 16px 16px 4px 16px;
}

/* Zone de saisie */
.chatkit-input {
  background: #1E293B;
  border: 1px solid #475569;
  border-radius: 24px;
  transition: border-color 0.2s;
}

.chatkit-input:focus-within {
  border-color: #3B82F6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Indicateur de chargement */
.chatkit-typing-indicator {
  color: #94A3B8;
}

/* Bouton d'envoi */
.chatkit-send-button {
  background: #2563EB;
  border-radius: 50%;
  width: 36px;
  height: 36px;
}

Points clés à retenir

• Le système de thème contrôle couleurs, typographie, espacement et bordures
• Les composants de message personnalisés permettent un rendu sur mesure
• Le thème peut changer dynamiquement (mode sombre/clair)
• Les classes CSS de ChatKit permettent un contrôle fin au pixel
• Adaptez le placeholder et les options de la zone de saisie à votre contexte