Updated components, using a new hook, using a types folder again, sha…

…red components folder

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chattr",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A chatgpt chatbot component library for nextjs.",
   "scripts": {
     "build": "rollup -c && npm publish",
@@ -34,7 +34,10 @@
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "dayjs": "^1.11.10",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.0.4",
     "eslint-config-prettier": "^9.0.0",
+    "next": "^14.0.4",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.7",
     "react": "^18.2.0",

src/components/default/chattr-feed.tsx

@@ -1,32 +1,24 @@
 import React from 'react'
 
+import { useScroll } from '../../hooks'
+
 import ChattrMessages from './chattr-messages'
 import ChattrLoader from './chattr-loader'
 
-type ChattrMessages = {
-  role: 'user' | 'assistant'
-  key?: string
-  content?: string
-}
+import { ChattrMessage } from '../../types'
 
 function ChattrFeed({
   messages,
   userName,
   chattrBotName,
   loading,
 }: {
-  messages: ChattrMessages[]
+  messages: ChattrMessage[]
   userName?: string
   chattrBotName?: string
   loading?: boolean
 }) {
-  const ref = React.useRef<HTMLDivElement>(null)
-
-  React.useEffect(() => {
-    if (ref.current) {
-      ref.current.scrollTop = ref.current.scrollHeight
-    }
-  }, [messages])
+  const ref = useScroll(messages)
 
   return (
     <div

src/components/default/chattr-form.tsx

@@ -1,13 +1,6 @@
 import React from 'react'
 
-type ChattrForm = {
-  setMessage: React.Dispatch<React.SetStateAction<string>>
-  sendMessage: (
-    event: React.MouseEvent | React.KeyboardEvent | React.FormEvent
-  ) => void
-  message: string
-  loading: boolean
-}
+import type { ChattrForm } from '../../types'
 
 export default function ChattrForm({
   setMessage,
@@ -18,7 +11,7 @@ export default function ChattrForm({
   return (
     <form
       onSubmit={event => sendMessage(event)}
-      className='rounded-b-chattrRoundedLarge border-chattrGray bg-chattrWhite dark:border-chattrTextDark/10 dark:bg-chattrPitchBlack z-40 flex h-16 items-center justify-between border-t px-2 py-2.5'>
+      className='dark:bg-chattrPitchBlack rounded-b-chattrRoundedLarge border-chattrGray bg-chattrWhite dark:border-chattrTextDark/10 z-40 flex h-16 items-center justify-between border-t px-2 py-2.5'>
       <input
         className='rounded-chattrRoundedMedium border-chattrGray bg-chattrWhite text-chattrText placeholder:text-chattrSecondary/70 focus:border-chattrPrimary dark:border-chattrTextDark/10 dark:bg-chattrBlack dark:text-chattrTextDark dark:placeholder:text-chattrTextDark/50 dark:focus:border-chattrPrimaryDark h-10 min-w-0 flex-auto appearance-none border px-3 py-2 font-light focus:outline-none sm:text-sm'
         type='text'

src/components/default/chattr-header.tsx

@@ -10,7 +10,7 @@ function ChattrHeader({
   chattrBotName?: string
 }) {
   return (
-    <div className='rounded-t-chattrRoundedLarge border-chattrGray bg-chattrWhite dark:border-chattrTextDark/10 dark:bg-chattrPitchBlack z-40 flex h-14 w-full items-center justify-between border-b px-3 py-2'>
+    <div className='dark:bg-chattrPitchBlack rounded-t-chattrRoundedLarge border-chattrGray bg-chattrWhite dark:border-chattrTextDark/10 z-40 flex h-14 w-full items-center justify-between border-b px-3 py-2'>
       <div className='ml-1 flex flex-[0.5] justify-start'>
         <h3 className='text-chattrText dark:text-chattrTextDark text-sm font-semibold tracking-wide'>
           {chattrBotName}

src/components/default/chattr-messages.tsx

@@ -3,11 +3,7 @@ import React from 'react'
 import ChattrAssistantMessage from './chattr-assistant-message'
 import ChattrUserMessage from './chattr-user-message'
 
-type ChattrMessage = {
-  role: 'user' | 'assistant'
-  key?: string
-  content?: string
-}
+import { ChattrMessage } from '../../types'
 
 function ChattrMessages({
   message: { content, role, key },

src/components/default/chattrbot.tsx

@@ -6,17 +6,12 @@ import ChattrContainer from './chattr-container'
 import ChattrFeed from './chattr-feed'
 import ChattrForm from './chattr-form'
 import ChattrHeader from './chattr-header'
-import ChattrOpenButton from './chattr-open-button'
+import { ChattrOpenButton } from '../shared'
 
-type ChattrMessage = {
-  role: 'user' | 'assistant'
-  key?: string
-  content?: string
-}
+import type { ChattrMessage } from '../../types'
 
 /**
  * Chattrbot - A pre made chatbot solution with light/dark mode tailwind css classes. Uses basic chat functionality with chatgpt models.
- *
  * @returns The entire Default Chattrbot component.
  */
 

src/components/default/index.ts

@@ -4,9 +4,6 @@ export { default as ChattrContainer } from './chattr-container'
 export { default as ChattrFeed } from './chattr-feed'
 export { default as ChattrForm } from './chattr-form'
 export { default as ChattrHeader } from './chattr-header'
-export { default as ChattrLoader } from './chattr-loader'
 export { default as ChattrMessages } from './chattr-messages'
-export { default as ChattrOpenButton } from './chattr-open-button'
-export { default as ChattrOpenIcon } from './chattr-open-icon'
 export { default as ChattrUserMessage } from './chattr-user-message'
 export { default as Chattrbot } from './chattrbot'

src/components/index.ts

@@ -1,2 +1,3 @@
 export * as Default from './default'
 export * as Minimalist from './minimalist'
+export * from './shared'

src/components/minimalist/chattr-assistant-image.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 
 import ChattrAssistantMessage from './chattr-assistant-message'
 
@@ -24,14 +25,14 @@ export default function ChattrAssistantImage({
     <div
       key={key}
       className='flex justify-end'>
-      <div className='rounded-chattrRoundedLarge bg-chattrBackgroundMuted px-3 py-2 shadow dark:bg-chattrGrayDark'>
-        <p className='break-words text-sm font-light text-chattrText dark:text-chattrTextDark'>
+      <div className='rounded-chattrRoundedLarge bg-chattrBackgroundMuted dark:bg-chattrGrayDark px-3 py-2 shadow'>
+        <p className='text-chattrText dark:text-chattrTextDark break-words text-sm font-light'>
           Here&apos;s what i generated with your description, {data.description}
           :
         </p>
-        <div className='mb-2 mt-3 overflow-hidden rounded-chattrRoundedLarge'>
-          <img
-            alt='Framed Image'
+        <div className='rounded-chattrRoundedLarge mb-2 mt-3 overflow-hidden'>
+          <Image
+            alt={`Chattr | ${data.description}`}
             className='aspect-square w-full object-cover'
             src={data.url}
             height={500}

src/components/minimalist/chattr-container.tsx

@@ -6,7 +6,7 @@ export default function ChattrContainer({
   children: React.ReactNode
 }) {
   return (
-    <div className='fixed bottom-4 right-4 z-20 h-96 max-h-96 w-[315px] rounded-chattrRoundedMedium border border-chattrGray bg-chattrWhite dark:border-chattrGrayDark dark:bg-chattrBlack dark:text-chattrTextDark'>
+    <div className='border-chattrGray dark:border-chattrGrayDark dark:bg-chattrBlack rounded-chattrRoundedMedium bg-chattrWhite dark:text-chattrTextDark fixed bottom-4 right-4 z-20 h-96 max-h-96 w-[315px] border'>
       {children}
     </div>
   )

src/components/minimalist/chattr-feed.tsx

@@ -1,25 +1,11 @@
 import React from 'react'
 
+import { useScroll } from '../../hooks'
+
 import ChattrMessages from './chattr-messages'
 import ChattrLoader from './chattr-loader'
 
-type ChattrMessage = {
-  role: 'user' | 'assistant'
-  key?: string
-  content?: string
-  ui: string
-  data?: {
-    temperature: string
-    celcius: string
-    location: string
-    description: string
-    humidity: string
-    wind: string
-    clouds: string
-    state: string
-    url: string
-  }
-}
+import type { ChattrMessage } from '../../types'
 
 function ChattrFeed({
   messages,
@@ -28,13 +14,7 @@ function ChattrFeed({
   messages: ChattrMessage[]
   loading: boolean
 }) {
-  const ref = React.useRef<HTMLDivElement>(null)
-
-  React.useEffect(() => {
-    if (ref.current) {
-      ref.current.scrollTop = ref.current.scrollHeight
-    }
-  }, [messages])
+  const ref = useScroll(messages)
 
   return (
     <div

src/components/minimalist/chattr-form.tsx

@@ -1,13 +1,6 @@
 import React from 'react'
 
-type ChattrForm = {
-  setMessage: React.Dispatch<React.SetStateAction<string>>
-  sendMessage: (
-    event: React.MouseEvent | React.KeyboardEvent | React.FormEvent
-  ) => void
-  message: string
-  loading: boolean
-}
+import type { ChattrForm } from '../../types'
 
 export default function ChattrForm({
   setMessage,
@@ -21,7 +14,7 @@ export default function ChattrForm({
         onSubmit={event => sendMessage(event)}
         className='flex w-full items-center justify-between space-x-2'>
         <input
-          className='flex h-9 w-full flex-auto rounded-chattrRoundedSmall border border-chattrGray bg-transparent px-2 py-1 text-sm font-light text-chattrText shadow-sm transition-colors placeholder:bg-transparent focus:border-chattrPrimary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-chattrPrimary disabled:cursor-not-allowed disabled:opacity-50 dark:border-chattrGrayDark dark:text-chattrTextDark'
+          className='rounded-chattrRoundedSmall border-chattrGray text-chattrText focus:border-chattrPrimary focus-visible:ring-chattrPrimary dark:border-chattrGrayDark dark:text-chattrTextDark flex h-9 w-full flex-auto border bg-transparent px-2 py-1 text-sm font-light shadow-sm transition-colors placeholder:bg-transparent focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50'
           type='text'
           required
           autoComplete='off'
@@ -31,7 +24,7 @@ export default function ChattrForm({
           onChange={({ target: { value } }) => setMessage(value)}
         />
         <button
-          className='inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-chattrRoundedSmall bg-chattrBackgroundMuted text-sm font-medium text-chattrText shadow transition-colors hover:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-chattrPrimary disabled:pointer-events-none disabled:opacity-50 dark:bg-chattrGrayDark dark:text-chattrTextDark'
+          className='rounded-chattrRoundedSmall bg-chattrBackgroundMuted text-chattrText focus-visible:ring-chattrPrimary dark:bg-chattrGrayDark dark:text-chattrTextDark inline-flex h-9 w-9 items-center justify-center whitespace-nowrap text-sm font-medium shadow transition-colors hover:opacity-80 focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50'
           type='submit'
           disabled={loading}>
           <svg

src/components/minimalist/chattr-loader.tsx

@@ -4,7 +4,7 @@ export default function ChattrLoader() {
   return (
     <div className='px-3 py-2'>
       <div className='mb-3 flex justify-end'>
-        <div className='inline-flex rounded-chattrRoundedLarge bg-chattrBackgroundMuted px-0.5 py-1.5 shadow dark:bg-chattrGrayDark'>
+        <div className='rounded-chattrRoundedLarge bg-chattrBackgroundMuted dark:bg-chattrGrayDark inline-flex px-0.5 py-1.5 shadow'>
           <div className='flex items-center justify-center px-3 py-2'>
             <div className='chattrDotMinimalist animate-chattrLoader'></div>
             <div className='chattrDotMinimalist animation-delay-200 animate-chattrLoader'></div>

src/components/minimalist/chattr-messages.tsx

@@ -6,23 +6,7 @@ import ChattrAssistantImage from './chattr-assistant-image'
 import ChattrAssistantWeather from './chattr-assistant-weather'
 import ChattrAssistantVideo from './chattr-assistant-video'
 
-type ChattrMessage = {
-  role: 'user' | 'assistant'
-  key?: string
-  content?: string
-  ui: string
-  data?: {
-    temperature: string
-    celcius: string
-    location: string
-    description: string
-    humidity: string
-    wind: string
-    clouds: string
-    state: string
-    url: string
-  }
-}
+import type { ChattrMessage } from '../../types'
 
 function ChattrMessages({
   message: { content, role, key, ui, data },

src/components/minimalist/chattrbot.tsx

@@ -6,29 +6,12 @@ import ChattrContainer from './chattr-container'
 import ChattrFeed from './chattr-feed'
 import ChattrForm from './chattr-form'
 import ChattrHeader from './chattr-header'
-import ChattrOpenButton from './chattr-open-button'
+import { ChattrOpenButton } from '../shared'
 
-type ChattrMessage = {
-  role: 'user' | 'assistant'
-  key?: string
-  content?: string
-  ui: string
-  data?: {
-    temperature: string
-    celcius: string
-    location: string
-    description: string
-    humidity: string
-    wind: string
-    clouds: string
-    state: string
-    url: string
-  }
-}
+import type { ChattrMessage } from '../../types'
 
 /**
  * Chattrbot - A pre made chatbot solution with light/dark mode tailwind css classes. Uses function calling features.
- *
  * @returns The entire Minimalist Chattrbot component.
  */
 

src/components/minimalist/index.ts

@@ -9,7 +9,5 @@ export { default as ChattrForm } from './chattr-form'
 export { default as ChattrHeader } from './chattr-header'
 export { default as ChattrLoader } from './chattr-loader'
 export { default as ChattrMessages } from './chattr-messages'
-export { default as ChattrOpenButton } from './chattr-open-button'
-export { default as ChattrOpenIcon } from './chattr-open-icon'
 export { default as ChattrUserMessage } from './chattr-user-message'
 export { default as Chattrbot } from './chattrbot'

src/components/default/chattr-open-button.tsx → src/components/shared/chattr-open-button.tsx

@@ -4,10 +4,10 @@ import ChattrOpenIcon from './chattr-open-icon'
 
 export default function ChattrOpenButton({ toggle }: { toggle: () => void }) {
   return (
-    <div className='fixed bottom-4 right-4 z-20 flex items-center justify-center md:flex-1'>
+    <div className='border-chattrGray dark:border-chattrTextDark/10 fixed bottom-4 right-4 z-20 flex items-center justify-center rounded-full border md:flex-1'>
       <button
         onClick={toggle}
-        className='bg-chattrWhite/90 shadow-chattrText/5 ring-chattrBlack/5 dark:bg-chattrText dark:ring-chattrWhite/10 dark:hover:ring-chattrWhite/20 group rounded-full p-3 shadow-lg ring-1'
+        className='bg-chattrWhite dark:bg-chattrBlack group rounded-full p-3 shadow'
         type='button'
         role='button'
         aria-label='Toggle Chattrbot'>

src/components/shared/index.ts

@@ -0,0 +1,2 @@
+export { default as ChattrOpenButton } from './chattr-open-button'
+export { default as ChattrOpenIcon } from './chattr-open-icon'

src/hooks/index.ts

@@ -1 +1,2 @@
 export { default as useChattr } from './use-chattr'
+export { default as useScroll } from './use-scroll'