0.0.518 • Published 6 months ago
@libraria/react v0.0.518
Description
@libraria/react
is a comprehensive React component library to integrate powerful ChatGPT and Libraria AI on any surface you want. From search, to chatbots and oracles, with customizable styling and configurations, @libraria/react
has got you covered.
Installation
npm install @libraria/react
or
yarn add @libraria/react
Prerequisites
- An
anonKey
on libraria.ai. You can follow the docs on docs.libraria.ai
Features
- 🤖 LibrariaChatbot: A full-featured chatbot interface.
- 💬 LibrariaInlineChat: Minimalist inline chat functionality.
- 🧙 LibrariaOracle: Answering component with an optional compact mode.
- 🔍 LibrariaSearch: A search bar powered by ChatGPT & Libraria AI.
- 🎨 Customizable styles for components.
- 🗝️ Pass in your
anonKey
to identify which library to use
Usage
LibrariaChatbot
import { LibrariaChatbot } from "@libraria/react";
function MyApp() {
return (
<LibrariaChatbot
anonKey="YOUR_ANON_KEY_HERE"
placement="bottom-right"
style={{
fontFamily: "Roboto",
fontColor: "black",
// ... other styles
}}
/>
);
}
LibrariaInlineChat
import { LibrariaInlineChat } from "@libraria/react";
function MyApp() {
return <LibrariaInlineChat anonKey="YOUR_ANON_KEY_HERE" />;
}
LibrariaOracle
import { LibrariaOracle } from "@libraria/react";
function MyApp() {
return <LibrariaOracle anonKey="YOUR_ANON_KEY_HERE" isCompact={true} />;
}
LibrariaSearch
import { LibrariaSearch } from "@libraria/react";
function MyApp() {
return (
<LibrariaSearch
anonKey="YOUR_ANON_KEY_HERE"
isDarkMode={true}
style={{
fontFamily: "Roboto",
fontColor: "white",
// ... other styles
}}
/>
);
}
Props
Common Prop for All Components
anonKey
(required)
- Type:
string
- Description: Your anonymous key for authentication with the AI services.
LibrariaChatbot Props
placement
- Type:
string
- Default:
'bottom-right'
- Description: Placement of the chatbot on the screen. Available options:
'top-left'
,'top-right'
,'bottom-left'
,'bottom-right'
.
LibrariaOracle Props
isCompact
- Type:
boolean
- Default:
false
- Description: Display the Oracle component in a compact mode.
LibrariaSearch Props
keepStateOnClose
- Type:
boolean
- Default:
false
- Description: Option to keep the search state even after closing the component.
isDarkMode
- Type:
boolean
- Default:
false
- Description: Enable or disable dark mode.
style
- Type:
StyleOverrideProps
- Description: Override the default styles for the search component in light mode.
darkModeStyle
- Type:
StyleOverrideProps
- Description: Override the default styles for the search component in dark mode.
StyleOverrideProps
An object to customize the styles. Available properties:
fontFamily
: Font family of the search input.fontColor
: Font color of the search input.fontSize
: Font size of the search input.iconColor
: Color of the search icon.borderColor
: Border color of the search input.hoverColor
: Border color of the search input on hover.backgroundColor
: Background color of the search input.inputBorderRadius
: Border radius of the search input.borderRadius
: Border radius of the search component.inputBackgroundColor
: Background color of the search input.
0.0.518
6 months ago
0.0.517
6 months ago
0.0.516
6 months ago
0.0.515
6 months ago
0.0.512
6 months ago
0.0.511
6 months ago
0.0.510
6 months ago
0.0.509
6 months ago
0.0.508
6 months ago
0.0.507
6 months ago
0.0.506
6 months ago
0.0.505
6 months ago
0.0.504
6 months ago
0.0.503
6 months ago
0.0.502
6 months ago
0.0.501
6 months ago
0.0.500
6 months ago
0.0.6
6 months ago
0.0.5
6 months ago
0.0.3
6 months ago
0.0.2
6 months ago
0.0.1
6 months ago