slingshot-chat

A React-based AI chat interface component that can be embedded into any host application. Slingshot chat provides an intelligent conversational interface with support for file attachments, voice input, and contextual search capabilities.

Installation

Add .npmrc in root directory. Please reach out to AppFramework team for .npmrc.

pnpm install slingshot-chat

Running this package locally

1. Clone the repo.
2. Add .npmrc in root directory.
3. Run command pnpm install
4. Run pnpm build
5. In consumer repo, add dependency

"slingshot-chat": "file:relative_slingshot_repo_path”

Basic Usage

"use client";
import { useState } from "react";
import dynamic from "next/dynamic";
const Kai = dynamic(() => import("slingshot-chat"), { ssr: false });
import "slingshot-chat/styles.css";

function MyApp() {
  const [isChatOpen, setIsChatOpen] = useState(true);

  const toggleChatOpen = () => {
    setIsChatOpen(!isChatOpen);
  };

  const config = {
    display: {
      isAlxOpen: isChatOpen,
    },
    integrations: {
      conversation: {
        url: "your_conversation_endpoint",
      },
      chatHistory: {
        url: "your_chat_history_endpoint",
      },
      realtime: {
        url: "your_realtime_endpoint",
      },
      mcpConfig: {
        url: "your_mcp_config_endpoint",
      },
    },
    mainContainer: {
      header: {
        labels: {
          title: "ALX",
        },
        features: {
          enableChatMaximize: true,
        },
        callbacks: {
          onDisplayToggle: toggleChatOpen,
        },
      },
      chat: {
        labels: {
          userName: "",
          welcomeMessage: "Hello, How can I help you?",
        },
      },
      footer: {
        features: {
          enableRealtime: true,
        },
        callbacks: {
          onUserQuery: (requestId: string) =>
            console.log("requestId", requestId),
          onAgentResponse: (requestId: string, response: any) =>
            console.log("requestId", requestId, "response", response),
        },
      },
    },
  };

  return (
    <div className='cai-midnight'>
      <Kai config={config} />
    </div>
  );
}

Configuration Options

Display Property

| Property | Type | Description | Optional/Required | | ------------------- | --------- | ---------------------------------------------- | ----------------- | | display.isAlxOpen | boolean | Controls whether the chat interface is visible | Required |

Got it 👍 — your new config structure nests things differently (integrations + mainContainer split). Here’s the updated config documentation tables that match your latest structure:

Configuration Options (Updated)

Integrations

| Property | Type | Default | Description | Optional/Required | | ---------------------------------------- | ---------- | --------------------------------------------------------------------------- | --------------------------------------- | ----------------- | | integrations.host.url | string | – | Host service endpoint | Optional | | integrations.transcription.urls | string[] | – | List of transcription service endpoints | Optional | | integrations.conversation.url | string | https://dev.lionis.ai/api/v1/coreai-alx-service/chat/ | Conversation agent endpoint | Optional | | integrations.chatHistory.url | string | https://dev.lionis.ai/api/v1/coreai-alx-service/chat/conversations | Chat history endpoint | Optional | | integrations.realtime.url | string | https://dev.lionis.ai/api/v1/realtime/sessions | Real-time agent endpoint | Optional | | integrations.mcpConfig.url | string | https://dev.lionis.ai/api/v1/configservice/blocks/alx-mcp-config/manifest | MCP configuration endpoint | Optional | | integrations.guardrailInstructions.url | string | – | Guardrail instructions endpoint | Optional |

Main Container

| Property | Type | Default | Description | Optional/Required | | --------------------------------------------- | -------- | ------- | --------------------------------------------------------------- | ----------------- | | mainContainer.css.containerClass | string | – | Custom CSS classes for main container | Optional | | mainContainer.css.applyPositionReset | string | – | Resets the current webchat position and adheres to container | Optional | | mainContainer.css.fullscreenTransitionClass | string | – | Custom CSS classes for animation when maximizing chat container | Optional |

Header Configuration

| Property | Type | Default | Description | Optional/Required | | ---------------------------------------------------------- | ------------ | ------- | --------------------------------------- | ----------------- | | mainContainer.header.css.headerClass | string | – | Custom CSS classes for header container | Optional | | mainContainer.header.features.enableChatMaximize | boolean | false | Enable maximize feature for chat window | Optional | | mainContainer.header.features.disableHeader | boolean | false | Removes header from the chat. Options like, maximize, new chat, history and close chat will be removed | Optional | | mainContainer.header.features.disableConversationHistory | boolean | false | Disable conversation history related ui | Optional | | mainContainer.header.labels.title | string | ALX | Enable maximize feature for chat window | Optional | | mainContainer.header.callbacks.onDisplayToggle | () => void | – | Function to toggle chat visibility | Required |

Chat Configuration

| Property | Type | Default | Description | Optional/Required | | ------------------------------------------------------------------------------- | ------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------ | ----------------- | | mainContainer.chat.css.chatWrapper.mainWrapperClass | string | – | Custom CSS for the main chat wrapper when maximized | Optional | | mainContainer.chat.css.chatWrapper.subWrapperClass | string | – | Custom CSS for the sub chat wrapper when maximized | Optional | | mainContainer.chat.css.welcomeMessage.welcomeContainerClass | string | – | Custom CSS for the welcome message chat container | Optional | | mainContainer.chat.css.welcomeMessage.chatStartMaximizedClass | string | – | Custom CSS for the welcome message chat bubble when maximized | Optional | | mainContainer.chat.css.welcomeMessage.mainWelcomeMessageClass | string | – | Custom CSS for the main welcome text message when maximized | Optional | | mainContainer.chat.css.welcomeMessage.subWelcomeMessageClass | string | – | Custom CSS for the sub welcome text message when maximized | Optional | | mainContainer.chat.css.userMessage.chatInputSubContainerClass | string | – | Custom CSS for the user input chat bubble sub container when maximized | Optional | | mainContainer.chat.css.systemMessage.default.messageOptionsContainerClass | string | – | Custom CSS for the message options (e.g. Copy button) 1 | Optional | | mainContainer.chat.css.systemMessage.maximized.chatResponseMainContainerClass | string | – | Custom CSS for the AI response chat bubble main container when maximized | Optional | | mainContainer.chat.css.systemMessage.maximized.chatResponseSubContainerClass | string | – | Custom CSS for the AI response chat bubble sub container when maximized | Optional | | mainContainer.chat.css.systemMessage.maximized.messageOptionsContainerClass | string | – | Custom CSS for the message options (e.g. Copy button) when maximized | Optional | | mainContainer.chat.labels.userName | string | – | Display name for user | Optional | | mainContainer.chat.labels.welcomeMessage | string | This is Slingshot. How can I help you? | Custom welcome message displayed in chat | Optional |

Footer Configuration

| Property | Type | Default | Description | Optional/Required | | ----------------------------------------------------------------- | -------------------------------------------- | ------- | --------------------------------------- | ----------------- | | mainContainer.footer.css.footerClass | string | – | Custom CSS classes for footer container | Optional | | mainContainer.footer.features.enableRealtime | boolean | true | Enable real-time chat capabilities | Optional | | mainContainer.footer.callbacks.onUserQuery | (requestId: string) => void | – | Callback when user submits a query | Optional | | mainContainer.footer.callbacks.onAgentResponse | (requestId: string, response: any) => void | – | Callback when agent responds | Optional |