
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@selleo/chatbot-client
Advanced tools
Client that can be integrated with a backend created with openai
npm create vite@latest chatbot -- --template react-ts
.@selleo/chatbot-client
library, import it in your main component file:import { Chat } from "@selleo/chatbot-client";
import "../axiosConfig";
const YourComponent = () => {
return <Chat apiUrl="http://localhost:3001" />; // change http://localhost:3001 to the link with your openai server
};
export default YourComponent;
type ChatProps = {
logo?: ComponentType<SVGProps<SVGSVGElement>>;
toggleButtonIcon?: ComponentType<SVGProps<SVGSVGElement>>;
UserBubbleClassName?: string;
AssistantBubbleClassName?: string;
messageResponseDotsClassName?: string;
chatToggleButtonClassName?: string;
chatMainClassName?: string;
topBarClassName?: string;
conversationClassName?: string;
inputSectionClassName?: string;
chatName?: string;
token?: string;
apiUrl: string;
placeholder?: string;
welcomeMessageText?: string;
};
chatName
: Name of the chattoken
: Token used for authenticating API requests, returned in headers with the queryapiUrl
: URL of the API endpoint used for chat interactionsplaceholder
: Placeholder text displayed in the input fieldwelcomeMessageText
: Text of the welcome message shown when the chat startslogo
: Component for the chat logo in SVG formattoggleButtonIcon
: Component for the icon used in the toggle button in SVG formatUserBubbleClassName
: CSS class name for styling the user's message bubbleAssistantBubbleClassName
: CSS class name for styling the assistant's message bubblemessageResponseDotsClassName
: CSS class name for styling the dots or animation shown while waiting for the server responsechatToggleButtonClassName
: CSS class name for styling the floating toggle button's appearance and positionchatMainClassName
: CSS class name for styling and positioning the main chat windowtopBarClassName
: CSS class name for styling the top bar of the chat, which contains the logo, chat name, and toggle buttonconversationClassName
: CSS class name for styling the conversation window where chat bubbles are displayedinputSectionClassName
: CSS class name for styling the input section at the bottom of the chat, which includes the input field and send buttonThe application is simply divided, so remember, for example, when styling bubbles, you can easily style a paragraph in the bubbles by adding the UserBubbleClassName
class and then styling the paragraph in it.
This project integrates with an OpenAI-like API for managing threads and messages.
The key operations include fetching messages, creating new threads, deleting threads, and adding messages to threads.
The API interacts with the following endpoints:
GET /api/threads/:threadId/messages
: Fetch messages for a given thread.POST /api/threads
: Create a new thread.DELETE /api/threads/:threadId
: Delete an existing thread.POST /api/threads/:threadId/messages
: Add a message to a specific thread.Fetch Messages
Fetches all messages for a given thread ID.
Endpoint:
GET /api/threads/:threadId/messages
Response:
Returns a list of messages in the following format:
[
{
"id": "message1",
"content": "Message content here",
"timestamp": "2023-10-01T12:34:56Z"
}
]
Create a Thread Creates a new conversation thread.
Endpoint:
POST /api/threads
Response:
{
"threadId": "newThreadId"
}
Delete a Thread Deletes a specific thread by ID.
Endpoint:
DELETE /api/threads/:threadId
Response: 204 No Content on successful deletion.
Create a Message Adds a new message to an existing thread.
Endpoint:
POST /api/threads/:threadId/messages
Request Body:
{
"content": "Your message here"
}
FAQs
Client that can be integrated with a backend created with openai
The npm package @selleo/chatbot-client receives a total of 1 weekly downloads. As such, @selleo/chatbot-client popularity was classified as not popular.
We found that @selleo/chatbot-client demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.