openreactbot
Version:
Customizable OpenAI chatbot for react
196 lines • 14.4 kB
Markdown
��# O p e n R e a c t B o t
[ ! [ G i t h u b ] ( h t t p s : / / i m g . s h i e l d s . i o / b a d g e / o p e n _ s o u r c e - h i ? l o g o = g i t h u b ) ] ( h t t p s : / / g i t h u b . c o m / L o d j u r e t 2 0 0 1 / o p e n r e a c t b o t ) [ ! [ T y p e S c r i p t ] ( h t t p s : / / i m g . s h i e l d s . i o / b a d g e / t y p e s c r i p t - b l u e ? s t y l e = f l a t - s q u a r e & l o g o = t y p e s c r i p t & l a b e l C o l o r = w h i t e ) ] ( h t t p s : / / w w w . t y p e s c r i p t l a n g . o r g / ) [ ! [ O p e n A I ] ( h t t p s : / / i m g . s h i e l d s . i o / b a d g e / O p e n A I - b l a c k ? s t y l e = f l a t & l o g o = o p e n a i & l a b e l C o l o r = b l a c k ) ] ( h t t p s : / / o p e n a i . c o m / ) [ ! [ R e a c t ] ( h t t p s : / / i m g . s h i e l d s . i o / b a d g e / R e a c t - b l u e ? s t y l e = f l a t & l o g o = r e a c t & l a b e l C o l o r = b l a c k ) ] ( h t t p s : / / r e a c t j s . o r g / ) [ ! [ E a s y T o U s e ] ( h t t p s : / / i m g . s h i e l d s . i o / b a d g e / E a s y % 2 0 t o % 2 0 u s e - p i n k ? s t y l e = f o r - t h e - b a d g e ) ] ( # c o n f i g u r a t i o n ) [ ! [ C u s t o m i z e ] ( h t t p s : / / i m g . s h i e l d s . i o / b a d g e / C u s t o m i z a b l e - r e d ? s t y l e = f l a t & l o g o = a d o b e a c r o b a t r e a d e r & l a b e l C o l o r = b l a c k ) ] ( # 3 - s t y l e s c o n f i g )
C o n f i g u r e y o u r o w n C h a t B o t w i t h O p e n A I & c u s t o m i z e t h e U I t o y o u r l i k i n g ! : a r t : : s p e e c h _ b a l l o o n :
T h e O p e n R e a c t B o t i s a n o p e n s o u r c e p r o j e c t f o r c r a f t i n g i n t e r a c t i v e w e b c h a t b o t s . : m a n _ t e c h n o l o g i s t :
* * O p e n R e a c t B o t b r i n g s y o u r C h a t B o t d e v e l o p m e n t a t w a r p s p e e d * * : r o c k e t :
# # D e m o
! [ G I F D E M O ] ( h t t p s : / / m e d i a . g i p h y . c o m / m e d i a / v 1 . Y 2 l k P T c 5 M G I 3 N j E x d n M 3 N W 1 6 b n o z O G 5 w Y n p 5 c 3 B z Y z h n N n E z e X p u d W Q 2 Y W F i a D k 0 d W p n c i Z l c D 1 2 M V 9 p b n R l c m 5 h b F 9 n a W Z f Y n l f a W Q m Y 3 Q 9 Z w / x p 5 k I w T w y 2 m S 0 E A a s Z / g i p h y . g i f )
# # I n s t a l l
B e f o r e y o u i n s t a l l m a k e s u r e y o u h a v e a R e a c t P r o j e c t s e t u p a l r e a d y !
U s i n g y a r n :
` ` ` s h
y a r n a d d o p e n r e a c t b o t
` ` `
U s i n g n p m :
` ` ` s h
n p m i n s t a l l o p e n r e a c t b o t
` ` `
# # C o n f i g u r a t i o n
1 . C r e a t e a C o n f i g u r a t i o n o b j e c t i n * * s r c / c o n f i g * * f o l d e r [ R e a d m o r e a b o u t i t h e r e ] ( # c o n f i g u r a t i o n - o b j e c t )
` ` ` j a v a s c r i p t
i m p o r t { O p e n R e a c t B o t P r o p s } f r o m " o p e n r e a c t b o t " ;
c o n s t o r b C o n f i g s : O p e n R e a c t B o t P r o p s = {
A P I _ K E Y : i m p o r t . m e t a . e n v . V I T E _ O P E N A I _ A P I _ K E Y a s s t r i n g ,
A I C o n f i g : {
p r o m p t : " Y o u a r e a p i r a t e t h a t w i l l h e l p s o f t w a r e d e v e l o p e r w i t h d e b u g g i n g t h e i r c o d e " ,
s t a r t M e s s a g e : " H e l l o m a t e y ! W h a t c a n i h e l p y o u w i t h t o d a y ? A r r r r r g h ! " ,
m o d e l : " g p t - 3 . 5 - t u r b o " ,
} ,
s t y l e s C o n f i g : {
l o g o W i d t h : " 8 0 p x " ,
l o g o H e i g h t : " 8 0 p x " ,
} ,
} ;
e x p o r t d e f a u l t o r b C o n f i g s ;
` ` `
2 . U s e y o u r O p e n A I [ A P I _ K E Y ] ( # 1 - a p i _ k e y ) a s a * * e n v i o r m e n t v a r i a b l e * * a n d d o n t h a r d c o d e i t .
3 . [ A I C o n f i g ] ( # 2 - a i c o n f i g ) p r o p e r t i e s a r e m a n d a t o r y
4 . [ s t y l e s C o n f i g ] ( # 3 - s t y l e s c o n f i g ) i s o p t i o n a l
# # S t y l i n g
B e c a u s e t h e C h a t B o t i n t e r f a c e i s u s i n g a d e f a u l t s t y l i n g l i b r a r y y o u n e e d t o c r e a t e a C S S f i l e t o o v e r r i d e t h e d e f a u l t s t y l i n g s . B u t d o n t w o r r y ! I g o t y o u c o v e r e d !
1 . C r e a t e a C S S f i l e i n * * s r c / s t y l e s * * f o l d e r
2 . C o p y t h e C S S c o d e p r o v i d e d h e r e : [ o p e n r e a c t b o t . c s s ] ( h t t p s : / / g i t h u b . c o m / L o d j u r e t 2 0 0 1 / o p e n r e a c t b o t / b l o b / m a i n / s r c / s t y l e s / o p e n r e a c t b o t . c s s ) i n t o y o u r C S S f i l e .
3 . C o n f i g u r e t h e C S S t o y o u r l i k i n g o r u s e t h e d e f a u l t s t y l e s .
# # U s a g e
` ` ` j s x
i m p o r t O p e n R e a c t B o t f r o m " o p e n r e a c t b o t " ;
i m p o r t o r b C o n f i g s f r o m " . / c o n f i g / o r b C o n f i g s " ;
i m p o r t " . / s t y l e s / o p e n r e a c t b o t . c s s " ;
f u n c t i o n A p p ( ) {
r e t u r n (
< >
< h 1 > H e l l o w o r l d < / h 1 >
< O p e n R e a c t B o t { . . . o r b C o n f i g s } / >
< / >
) ;
}
e x p o r t d e f a u l t A p p ;
` ` `
Y e a h ! Y o u r O p e n R e a c t B o t i s r e a d y t o g o !
# # D o c u m e n t a t i o n
# # # C o n f i g u r a t i o n O b j e c t :
# # # # 1 . A P I _ K E Y
- * * D e s c r i p t i o n : * * T h i s p r o p e r t y h o l d s t h e A P I k e y r e q u i r e d f o r a u t h e n t i c a t i o n a n d a c c e s s t o t h e O p e n A I s e r v i c e . * * U s e t h i s a s a e n v i r o m e n t v a r i a b l e f o r s a f e t y r e a s o n s * * . Y o u c a n o b t a i n a O p e n A I A P I _ K E Y [ H E R E ] ( h t t p s : / / p l a t f o r m . o p e n a i . c o m / )
# # # # 2 . A I C o n f i g
- * * D e s c r i p t i o n : * * T h i s o b j e c t c o n t a i n s c o n f i g u r a t i o n s r e l a t e d t o t h e A I m o d e l u s e d b y O p e n R e a c t B o t .
- * * p r o m p t : * * s t r i n g
- T h e p r o m p t f o r h o w t h e A I s h o u l d a c t .
- * * s t a r t M e s s a g e : * * s t r i n g
- T h e i n i t i a l m e s s a g e d i s p l a y e d w h e n t h e c h a t b o t i s s t a r t e d .
- * * m o d e l : * * s t r i n g
- T h e n a m e o r i d e n t i f i e r o f t h e A I m o d e l .
- T h e e s e m o d e l s c a n b e u s e d : g p t - 4 , g p t - 4 - t u r b o - p r e v i e w , g p t - 3 . 5 - t u r b o ( * * d e f a u l t * * )
# # # # 3 . S t y l e s C o n f i g
- * * D e s c r i p t i o n : * * T h i s o b j e c t c o n t a i n s ` o p t i o n a l ` c o n f i g u r a t i o n s f o r s t y l i n g t h e a p p e a r a n c e o f t h e O p e n R e a c t B o t u s e r i n t e r f a c e . A l l o f t h e s e p r o p e r t i e s w i l l o v e r r i d e t h e [ D E F A U L T V A L U E S ] ( # d e f a u l t - s t y l e - v a l u e s )
- * * n a m e : * * s t r i n g ( o p t i o n a l )
- T h e n a m e o f t h e c h a t b o t .
- * * l o g o : * * s t r i n g ( o p t i o n a l )
- T h e U R L o r p a t h t o t h e l o g o i m a g e .
- * * l o g o H e i g h t : * * s t r i n g ( o p t i o n a l )
- T h e h e i g h t o f t h e l o g o i m a g e .
- * * l o g o W i d t h : * * s t r i n g ( o p t i o n a l )
- T h e w i d t h o f t h e l o g o i m a g e .
- * * l o g o B o r d e r R a d i u s : * * s t r i n g ( o p t i o n a l )
- T h e b o r d e r r a d i u s o f t h e l o g o i m a g e .
- * * b o t t o m : * * s t r i n g ( o p t i o n a l )
- T h e d i s t a n c e o f t h e c h a t b o t f r o m t h e b o t t o m o f t h e s c r e e n .
- * * l e f t : * * s t r i n g ( o p t i o n a l )
- T h e d i s t a n c e o f t h e c h a t b o t f r o m t h e l e f t s i d e o f t h e s c r e e n .
- * * r i g h t : * * s t r i n g ( o p t i o n a l )
- T h e d i s t a n c e o f t h e c h a t b o t f r o m t h e r i g h t s i d e o f t h e s c r e e n .
- * * w i d t h : * * s t r i n g ( o p t i o n a l )
- T h e w i d t h o f t h e c h a t b o t .
- * * h e i g h t : * * s t r i n g ( o p t i o n a l )
- T h e h e i g h t o f t h e c h a t b o t .
- * * p l a c e h o l d e r : * * s t r i n g ( o p t i o n a l )
- T h e p l a c e h o l d e r t e x t d i s p l a y e d i n t h e i n p u t f i e l d .
- * * c h a t B o t I m g : * * s t r i n g ( o p t i o n a l )
- T h e U R L o r p a t h t o t h e c h a t b o t a v a t a r i m a g e .
- * * u s e r I m g : * * s t r i n g ( o p t i o n a l )
- T h e U R L o r p a t h t o t h e u s e r a v a t a r i m a g e .
# # # D e f a u l t S t y l e V a l u e s :
" I f [ S t y l e s C o n f i g ] ( # 3 - s t y l e s c o n f i g ) o b j e c t i s e m p t y o r o n l y s o m e p r o p e r t i e s a r e p r o v i d e d , O p e n R e a c t B o t d e f a u l t s t o t h e f o l l o w i n g s e t t i n g s : "
` ` ` j a v a s c r i p t
c o n s t d e f a u l t V a l u e s = {
n a m e : " O p e n R e a c t B o t " ,
l o g o : ` $ { o p e n r e a c t b o t I c o n } ` ,
l o g o H e i g h t : " 1 0 0 p x " ,
l o g o W i d t h : " 1 0 0 p x " ,
l o g o B o r d e r R a d i u s : " 5 0 p x " ,
b o t t o m : " 3 0 p x " ,
l e f t : " " ,
r i g h t : " 2 0 p x " ,
w i d t h : " 3 5 0 p x " ,
h e i g h t : " 6 0 0 p x " ,
p l a c e h o l d e r : " T y p e y o u r m e s s a g e . . . " ,
c h a t B o t I m g : ` $ { c h a t B o t I c o n } ` ,
u s e r I m g : ` $ { u s e r I c o n } ` ,
} ;
` ` `
T h e s e d e f a u l t s e n s u r e t h a t y o u r O p e n R e a c t B o t i n s t a n c e h a s a c o n s i s t e n t a n d v i s u a l l y a p p e a l i n g a p p e a r a n c e e v e n i f s p e c i f i c s t y l e c o n f i g u r a t i o n s a r e n o t p r o v i d e d . '=��
# # # T y p e s c r i p t
O p e n R e a c t B o t i s w r i t t e n i n T y p e S c r i p t : b l u e _ b o o k : : b l u e _ h e a r t :
# # # C o n t r i b u t i n g
I f y o u e n c o u n t e r a b u g o r e r r o r i n O p e n R e a c t B o t , I w e l c o m e y o u r c o n t r i b u t i o n s t o h e l p i m p r o v e t h e p r o j e c t . F e e l f r e e t o c l o n e t h e r e p o s i t o r y a n d s u b m i t a p u l l r e q u e s t w i t h y o u r f i x e s o r e n h a n c e m e n t s . : h u g s : : m a n _ t e c h n o l o g i s t :
T o c o n t r i b u t e :
1 . F o r k t h e [ r e p o s i t o r y ] ( h t t p s : / / g i t h u b . c o m / L o d j u r e t 2 0 0 1 / o p e n r e a c t b o t ) .
2 . C l o n e t h e f o r k e d r e p o s i t o r y t o y o u r l o c a l m a c h i n e .
3 . C r e a t e a n e w b r a n c h f o r y o u r c h a n g e s : ` g i t b r a n c h - c b u g - f i x ` .
4 . M a k e y o u r c h a n g e s a n d c o m m i t t h e m : ` g i t c o m m i t - m " F i x b u g o r e r r o r d e s c r i p t i o n " ` .
5 . P u s h y o u r c h a n g e s t o y o u r f o r k : ` g i t p u s h o r i g i n b u g - f i x ` .
6 . S u b m i t a p u l l r e q u e s t , d e s c r i b i n g t h e i s s u e y o u ' v e a d d r e s s e d a n d t h e c h a n g e s y o u ' v e m a d e .
I w i l l r e v i e w y o u r p u l l r e q u e s t a n d w o r k w i t h y o u t o i n c o r p o r a t e y o u r c h a n g e s i n t o t h e p r o j e c t .
T h a n k y o u f o r h e l p i n g t o i m p r o v e O p e n R e a c t B o t ! : p r a y :
# # # S p e c i a l T H A N K S t o :
- [ C h a t S c o p e ] ( h t t p s : / / c h a t s c o p e . i o / ) : s p e e c h _ b a l l o o n :
- [ O p e n A I ] ( h t t p s : / / o p e n a i . c o m / ) : r o b o t :
- [ R e a c t ] ( h t t p s : / / r e a c t j s . o r g / ) : m i l k y _ w a y :
F o r m a k i n g t h i s f u n p a c k a g e h a p p e n !
# # # S h o w y o u r s u p p o r t
I f y o u ' v e m a d e a n a w e s o m e O p e n R e a c t B o t a n d y o u l o v e t h i s p a c k a g e , p l e a s e : s t a r : t h i s r e p o s i t o r y !
# # # L i c e n s e
T h i s p r o j e c t i s u n d e r t h e [ M I T ] ( . / L I C E N S E . t x t ) l i c e n s e . : m a n _ j u d g e :