@red-hat-developer-hub/backstage-plugin-lightspeed 0.5.0 → 0.5.2

package/dist/components/LightSpeedChat.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightSpeedChat.esm.js","sources":["../../src/components/LightSpeedChat.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport { ErrorPanel } from '@backstage/core-components';\n\nimport { Box, makeStyles } from '@material-ui/core';\nimport {\n  Chatbot,\n  ChatbotContent,\n  ChatbotDisplayMode,\n  ChatbotFooter,\n  ChatbotFootnote,\n  ChatbotHeader,\n  ChatbotHeaderMain,\n  ChatbotHeaderMenu,\n  ChatbotHeaderTitle,\n  MessageBar,\n  MessageProps,\n} from '@patternfly/chatbot';\nimport ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';\nimport { DropdownItem, Title } from '@patternfly/react-core';\nimport { useQueryClient } from '@tanstack/react-query';\n\nimport { TEMP_CONVERSATION_ID } from '../const';\nimport {\n  useBackstageUserIdentity,\n  useConversationMessages,\n  useConversations,\n  useDeleteConversation,\n  useIsMobile,\n  useLastOpenedConversation,\n  useLightspeedDeletePermission,\n} from '../hooks';\nimport { ConversationSummary } from '../types';\nimport {\n  getCategorizeMessages,\n  getFootnoteProps,\n} from '../utils/lightspeed-chatbox-utils';\nimport { DeleteModal } from './DeleteModal';\nimport { LightspeedChatBox } from './LightspeedChatBox';\nimport { LightspeedChatBoxHeader } from './LightspeedChatBoxHeader';\n\nconst useStyles = makeStyles(theme => ({\n  body: {\n    // remove default margin and padding from common elements\n    '& h1, & h2, & h3, & h4, & h5, & h6, & p, & ul, & ol, & li': {\n      margin: 0,\n      padding: 0,\n    },\n  },\n  header: {\n    padding: `${theme.spacing(3)}px !important`,\n  },\n  headerMenu: {\n    // align hamburger icon with title\n    '& .pf-v6-c-button': {\n      display: 'flex',\n      alignItems: 'center',\n    },\n  },\n  headerTitle: {\n    justifyContent: 'left !important',\n  },\n  footer: {\n    '&>.pf-chatbot__footer-container': {\n      width: '95% !important',\n      maxWidth: 'unset !important',\n    },\n  },\n}));\n\ntype LightspeedChatProps = {\n  selectedModel: string;\n  userName?: string;\n  avatar?: string;\n  profileLoading: boolean;\n  handleSelectedModel: (item: string) => void;\n  models: { label: string; value: string }[];\n};\n\nexport const LightspeedChat = ({\n  selectedModel,\n  userName,\n  avatar,\n  profileLoading,\n  handleSelectedModel,\n  models,\n}: LightspeedChatProps) => {\n  const isMobile = useIsMobile();\n  const classes = useStyles();\n  const user = useBackstageUserIdentity();\n  const [filterValue, setFilterValue] = React.useState<string>('');\n  const [announcement, setAnnouncement] = React.useState<string>('');\n  const [conversationId, setConversationId] = React.useState<string>('');\n  const [isDrawerOpen, setIsDrawerOpen] = React.useState<boolean>(!isMobile);\n  const [newChatCreated, setNewChatCreated] = React.useState<boolean>(false);\n  const [isSendButtonDisabled, setIsSendButtonDisabled] =\n    React.useState<boolean>(false);\n  const [error, setError] = React.useState<Error | null>(null);\n  const [targetConversationId, setTargetConversationId] =\n    React.useState<string>('');\n  const [isDeleteModalOpen, setIsDeleteModalOpen] =\n    React.useState<boolean>(false);\n  const { isReady, lastOpenedId, setLastOpenedId, clearLastOpenedId } =\n    useLastOpenedConversation(user);\n\n  // Sync conversationId with lastOpenedId whenever lastOpenedId changes\n  React.useEffect(() => {\n    if (isReady && lastOpenedId !== null) {\n      setConversationId(lastOpenedId);\n    }\n  }, [lastOpenedId, isReady]);\n\n  const queryClient = useQueryClient();\n\n  const { data: conversations = [] } = useConversations();\n  const { mutateAsync: deleteConversation } = useDeleteConversation();\n  const { allowed: hasDeleteAccess } = useLightspeedDeletePermission();\n\n  React.useEffect(() => {\n    if (user && lastOpenedId === null && isReady) {\n      setConversationId(TEMP_CONVERSATION_ID);\n      setNewChatCreated(true);\n    }\n  }, [user, isReady, lastOpenedId, setConversationId]);\n\n  React.useEffect(() => {\n    // Update last opened conversation whenever `conversationId` changes\n    if (conversationId) {\n      setLastOpenedId(conversationId);\n    }\n  }, [conversationId, setLastOpenedId]);\n\n  const onStart = (conv_id: string) => {\n    setConversationId(conv_id);\n  };\n\n  const onComplete = (message: string) => {\n    setIsSendButtonDisabled(false);\n    setAnnouncement(`Message from Bot: ${message}`);\n    queryClient.invalidateQueries({\n      queryKey: ['conversations'],\n    });\n    setNewChatCreated(false);\n  };\n\n  const { conversationMessages, handleInputPrompt, scrollToBottomRef } =\n    useConversationMessages(\n      conversationId,\n      userName,\n      selectedModel,\n      avatar,\n      onComplete,\n      onStart,\n    );\n\n  const [messages, setMessages] =\n    React.useState<MessageProps[]>(conversationMessages);\n\n  // Auto-scrolls to the latest message\n  React.useEffect(() => {\n    setTimeout(() => {\n      scrollToBottomRef.current?.scrollIntoView({ behavior: 'auto' });\n    }, 10);\n    // eslint-disable-next-line\n  }, [messages, scrollToBottomRef.current]);\n\n  const sendMessage = (message: string | number) => {\n    if (conversationId !== TEMP_CONVERSATION_ID) {\n      setNewChatCreated(false);\n    }\n    setAnnouncement(\n      `Message from User: ${prompt}. Message from Bot is loading.`,\n    );\n    handleInputPrompt(message.toString());\n    setIsSendButtonDisabled(true);\n  };\n\n  const onNewChat = React.useCallback(() => {\n    (async () => {\n      setMessages([]);\n      setConversationId(TEMP_CONVERSATION_ID);\n      setNewChatCreated(true);\n    })();\n  }, [setConversationId, setMessages]);\n\n  const openDeleteModal = (conversation_id: string) => {\n    setTargetConversationId(conversation_id);\n    setIsDeleteModalOpen(true);\n  };\n\n  const handleDeleteConversation = React.useCallback(() => {\n    (async () => {\n      try {\n        await deleteConversation({\n          conversation_id: targetConversationId,\n          invalidateCache: false,\n        });\n        if (targetConversationId === lastOpenedId) {\n          onNewChat();\n          clearLastOpenedId();\n        }\n        setIsDeleteModalOpen(false);\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.warn(e);\n        setError(e);\n      }\n    })();\n  }, [\n    deleteConversation,\n    clearLastOpenedId,\n    lastOpenedId,\n    onNewChat,\n    targetConversationId,\n  ]);\n\n  const additionalMessageProps = React.useCallback(\n    (conversationSummary: ConversationSummary) => ({\n      menuItems: (\n        <DropdownItem\n          isDisabled={!hasDeleteAccess}\n          onClick={() => openDeleteModal(conversationSummary.conversation_id)}\n        >\n          Delete\n        </DropdownItem>\n      ),\n    }),\n    [hasDeleteAccess],\n  );\n  const categorizedMessages = getCategorizeMessages(\n    conversations,\n    additionalMessageProps,\n  );\n\n  const filterConversations = React.useCallback(\n    (targetValue: string) => {\n      const filteredConversations = Object.entries(categorizedMessages).reduce(\n        (acc, [key, items]) => {\n          const filteredItems = items.filter(item =>\n            item.text\n              .toLocaleLowerCase('en-US')\n              .includes(targetValue.toLocaleLowerCase('en-US')),\n          );\n          if (filteredItems.length > 0) {\n            acc[key] = filteredItems;\n          }\n          return acc;\n        },\n        {} as any,\n      );\n      return filteredConversations;\n    },\n    [categorizedMessages],\n  );\n\n  React.useEffect(() => {\n    setMessages(conversationMessages);\n  }, [conversationMessages]);\n\n  const onSelectActiveItem = React.useCallback(\n    (\n      _: React.MouseEvent | undefined,\n      selectedItem: string | number | undefined,\n    ) => {\n      setNewChatCreated(false);\n      setConversationId((c_id: string) => {\n        if (c_id !== selectedItem) {\n          return String(selectedItem);\n        }\n        return c_id;\n      });\n    },\n    [setConversationId],\n  );\n\n  const conversationFound = !!conversations.find(\n    c => c.conversation_id === conversationId,\n  );\n\n  const welcomePrompts =\n    (newChatCreated && conversationMessages.length === 0) ||\n    (!conversationFound && conversationMessages.length === 0)\n      ? [\n          {\n            title: 'Topic 1',\n            message: 'Helpful prompt for Topic 1',\n            onClick: () => sendMessage('Helpful prompt for Topic 1'),\n          },\n          {\n            title: 'Topic 2',\n            message: 'Helpful prompt for Topic 2',\n            onClick: () => sendMessage('Helpful prompt for Topic 2'),\n          },\n        ]\n      : [];\n\n  const handleFilter = React.useCallback((value: string) => {\n    setFilterValue(value);\n  }, []);\n\n  const onDrawerToggle = React.useCallback(() => {\n    setIsDrawerOpen(isOpen => !isOpen);\n  }, []);\n\n  if (error) {\n    return (\n      <Box padding={1}>\n        <ErrorPanel error={error} />\n      </Box>\n    );\n  }\n\n  return (\n    <>\n      {isDeleteModalOpen && (\n        <DeleteModal\n          isOpen={isDeleteModalOpen}\n          onClose={() => setIsDeleteModalOpen(false)}\n          onConfirm={handleDeleteConversation}\n        />\n      )}\n      <Chatbot\n        displayMode={ChatbotDisplayMode.embedded}\n        className={classes.body}\n      >\n        <ChatbotHeader className={classes.header}>\n          <ChatbotHeaderMain>\n            <ChatbotHeaderMenu\n              aria-expanded={isDrawerOpen}\n              onMenuToggle={() => setIsDrawerOpen(!isDrawerOpen)}\n              className={classes.headerMenu}\n            />\n            <ChatbotHeaderTitle className={classes.headerTitle}>\n              <Title headingLevel=\"h1\" size=\"3xl\">\n                Developer Hub Lightspeed\n              </Title>\n            </ChatbotHeaderTitle>\n          </ChatbotHeaderMain>\n\n          <LightspeedChatBoxHeader\n            selectedModel={selectedModel}\n            handleSelectedModel={item => handleSelectedModel(item)}\n            models={models}\n          />\n        </ChatbotHeader>\n        <ChatbotConversationHistoryNav\n          drawerPanelContentProps={{ isResizable: true, minSize: '200px' }}\n          reverseButtonOrder\n          displayMode={ChatbotDisplayMode.embedded}\n          onDrawerToggle={onDrawerToggle}\n          isDrawerOpen={isDrawerOpen}\n          setIsDrawerOpen={setIsDrawerOpen}\n          activeItemId={conversationId}\n          onSelectActiveItem={onSelectActiveItem}\n          conversations={filterConversations(filterValue)}\n          onNewChat={newChatCreated ? undefined : onNewChat}\n          handleTextInputChange={handleFilter}\n          drawerContent={\n            <>\n              <ChatbotContent>\n                <LightspeedChatBox\n                  userName={userName}\n                  messages={messages}\n                  profileLoading={profileLoading}\n                  announcement={announcement}\n                  ref={scrollToBottomRef}\n                  welcomePrompts={welcomePrompts}\n                />\n              </ChatbotContent>\n              <ChatbotFooter className={classes.footer}>\n                <MessageBar\n                  onSendMessage={sendMessage}\n                  isSendButtonDisabled={isSendButtonDisabled}\n                  hasAttachButton={false}\n                  hasMicrophoneButton\n                />\n                <ChatbotFootnote {...getFootnoteProps()} />\n              </ChatbotFooter>\n            </>\n          }\n        />\n      </Chatbot>\n    </>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"LightSpeedChat.esm.js","sources":["../../src/components/LightSpeedChat.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport { ErrorPanel } from '@backstage/core-components';\n\nimport { Box, makeStyles } from '@material-ui/core';\nimport {\n  Chatbot,\n  ChatbotContent,\n  ChatbotDisplayMode,\n  ChatbotFooter,\n  ChatbotFootnote,\n  ChatbotHeader,\n  ChatbotHeaderMain,\n  ChatbotHeaderMenu,\n  ChatbotHeaderTitle,\n  MessageBar,\n  MessageProps,\n} from '@patternfly/chatbot';\nimport ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';\nimport { DropdownItem, DropEvent, Title } from '@patternfly/react-core';\nimport { useQueryClient } from '@tanstack/react-query';\n\nimport { TEMP_CONVERSATION_ID } from '../const';\nimport {\n  useBackstageUserIdentity,\n  useConversationMessages,\n  useConversations,\n  useDeleteConversation,\n  useIsMobile,\n  useLastOpenedConversation,\n  useLightspeedDeletePermission,\n} from '../hooks';\nimport { useWelcomePrompts } from '../hooks/useWelcomePrompts';\nimport { ConversationSummary } from '../types';\nimport { getAttachments } from '../utils/attachment-utils';\nimport {\n  getCategorizeMessages,\n  getFootnoteProps,\n} from '../utils/lightspeed-chatbox-utils';\nimport Attachment from './Attachment';\nimport { useFileAttachmentContext } from './AttachmentContext';\nimport { DeleteModal } from './DeleteModal';\nimport FilePreview from './FilePreview';\nimport { LightspeedChatBox } from './LightspeedChatBox';\nimport { LightspeedChatBoxHeader } from './LightspeedChatBoxHeader';\n\nconst useStyles = makeStyles(theme => ({\n  body: {\n    // remove default margin and padding from common elements\n    '& h1, & h2, & h3, & h4, & h5, & h6, & p, & ul, & ol, & li': {\n      margin: 0,\n      padding: 0,\n    },\n  },\n  header: {\n    padding: `${theme.spacing(3)}px !important`,\n  },\n  headerMenu: {\n    // align hamburger icon with title\n    '& .pf-v6-c-button': {\n      display: 'flex',\n      alignItems: 'center',\n    },\n  },\n  headerTitle: {\n    justifyContent: 'left !important',\n  },\n  footer: {\n    '&>.pf-chatbot__footer-container': {\n      width: '95% !important',\n      maxWidth: 'unset !important',\n    },\n  },\n  footerPopover: {\n    '& img': {\n      maxWidth: '100%',\n    },\n  },\n}));\n\ntype LightspeedChatProps = {\n  selectedModel: string;\n  userName?: string;\n  avatar?: string;\n  profileLoading: boolean;\n  handleSelectedModel: (item: string) => void;\n  models: { label: string; value: string }[];\n};\n\nexport const LightspeedChat = ({\n  selectedModel,\n  userName,\n  avatar,\n  profileLoading,\n  handleSelectedModel,\n  models,\n}: LightspeedChatProps) => {\n  const isMobile = useIsMobile();\n  const classes = useStyles();\n  const user = useBackstageUserIdentity();\n  const [filterValue, setFilterValue] = React.useState<string>('');\n  const [announcement, setAnnouncement] = React.useState<string>('');\n  const [conversationId, setConversationId] = React.useState<string>('');\n  const [isDrawerOpen, setIsDrawerOpen] = React.useState<boolean>(!isMobile);\n  const [newChatCreated, setNewChatCreated] = React.useState<boolean>(false);\n  const [isSendButtonDisabled, setIsSendButtonDisabled] =\n    React.useState<boolean>(false);\n  const [error, setError] = React.useState<Error | null>(null);\n  const [targetConversationId, setTargetConversationId] =\n    React.useState<string>('');\n  const [isDeleteModalOpen, setIsDeleteModalOpen] =\n    React.useState<boolean>(false);\n  const { isReady, lastOpenedId, setLastOpenedId, clearLastOpenedId } =\n    useLastOpenedConversation(user);\n\n  const { fileContents, setFileContents, handleFileUpload } =\n    useFileAttachmentContext();\n\n  // Sync conversationId with lastOpenedId whenever lastOpenedId changes\n  React.useEffect(() => {\n    if (isReady && lastOpenedId !== null) {\n      setConversationId(lastOpenedId);\n    }\n  }, [lastOpenedId, isReady]);\n\n  const queryClient = useQueryClient();\n\n  const { data: conversations = [] } = useConversations();\n  const { mutateAsync: deleteConversation } = useDeleteConversation();\n  const { allowed: hasDeleteAccess } = useLightspeedDeletePermission();\n  const samplePrompts = useWelcomePrompts();\n  React.useEffect(() => {\n    if (user && lastOpenedId === null && isReady) {\n      setConversationId(TEMP_CONVERSATION_ID);\n      setNewChatCreated(true);\n    }\n  }, [user, isReady, lastOpenedId, setConversationId]);\n\n  React.useEffect(() => {\n    // Update last opened conversation whenever `conversationId` changes\n    if (conversationId) {\n      setLastOpenedId(conversationId);\n    }\n  }, [conversationId, setLastOpenedId]);\n\n  const onStart = (conv_id: string) => {\n    setConversationId(conv_id);\n  };\n\n  const onComplete = (message: string) => {\n    setIsSendButtonDisabled(false);\n    setAnnouncement(`Message from Bot: ${message}`);\n    queryClient.invalidateQueries({\n      queryKey: ['conversations'],\n    });\n    queryClient.invalidateQueries({\n      queryKey: ['conversationMessages', conversationId],\n    });\n    setNewChatCreated(false);\n  };\n\n  const { conversationMessages, handleInputPrompt, scrollToBottomRef } =\n    useConversationMessages(\n      conversationId,\n      userName,\n      selectedModel,\n      avatar,\n      onComplete,\n      onStart,\n    );\n\n  const [messages, setMessages] =\n    React.useState<MessageProps[]>(conversationMessages);\n\n  const sendMessage = (message: string | number) => {\n    if (conversationId !== TEMP_CONVERSATION_ID) {\n      setNewChatCreated(false);\n    }\n    setAnnouncement(\n      `Message from User: ${prompt}. Message from Bot is loading.`,\n    );\n    handleInputPrompt(message.toString(), getAttachments(fileContents));\n    setIsSendButtonDisabled(true);\n    setFileContents([]);\n  };\n\n  const onNewChat = React.useCallback(() => {\n    (async () => {\n      if (conversationId !== TEMP_CONVERSATION_ID) {\n        setMessages([]);\n        setConversationId(TEMP_CONVERSATION_ID);\n        setNewChatCreated(true);\n      }\n    })();\n  }, [conversationId, setConversationId, setMessages]);\n\n  const openDeleteModal = (conversation_id: string) => {\n    setTargetConversationId(conversation_id);\n    setIsDeleteModalOpen(true);\n  };\n\n  const handleDeleteConversation = React.useCallback(() => {\n    (async () => {\n      try {\n        await deleteConversation({\n          conversation_id: targetConversationId,\n          invalidateCache: false,\n        });\n        if (targetConversationId === lastOpenedId) {\n          onNewChat();\n          clearLastOpenedId();\n        }\n        setIsDeleteModalOpen(false);\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.warn(e);\n        setError(e);\n      }\n    })();\n  }, [\n    deleteConversation,\n    clearLastOpenedId,\n    lastOpenedId,\n    onNewChat,\n    targetConversationId,\n  ]);\n\n  const additionalMessageProps = React.useCallback(\n    (conversationSummary: ConversationSummary) => ({\n      menuItems: (\n        <DropdownItem\n          isDisabled={!hasDeleteAccess}\n          onClick={() => openDeleteModal(conversationSummary.conversation_id)}\n        >\n          Delete\n        </DropdownItem>\n      ),\n    }),\n    [hasDeleteAccess],\n  );\n  const categorizedMessages = getCategorizeMessages(\n    conversations,\n    additionalMessageProps,\n  );\n\n  const filterConversations = React.useCallback(\n    (targetValue: string) => {\n      const filteredConversations = Object.entries(categorizedMessages).reduce(\n        (acc, [key, items]) => {\n          const filteredItems = items.filter(item =>\n            item.text\n              .toLocaleLowerCase('en-US')\n              .includes(targetValue.toLocaleLowerCase('en-US')),\n          );\n          if (filteredItems.length > 0) {\n            acc[key] = filteredItems;\n          }\n          return acc;\n        },\n        {} as any,\n      );\n      return filteredConversations;\n    },\n    [categorizedMessages],\n  );\n\n  React.useEffect(() => {\n    setMessages(conversationMessages);\n  }, [conversationMessages]);\n\n  const onSelectActiveItem = React.useCallback(\n    (\n      _: React.MouseEvent | undefined,\n      selectedItem: string | number | undefined,\n    ) => {\n      setNewChatCreated(false);\n      setConversationId((c_id: string) => {\n        if (c_id !== selectedItem) {\n          return String(selectedItem);\n        }\n        return c_id;\n      });\n      scrollToBottomRef.current?.scrollToBottom();\n    },\n    [setConversationId, scrollToBottomRef],\n  );\n\n  const conversationFound = !!conversations.find(\n    (c: ConversationSummary) => c.conversation_id === conversationId,\n  );\n\n  const welcomePrompts =\n    (newChatCreated && conversationMessages.length === 0) ||\n    (!conversationFound && conversationMessages.length === 0)\n      ? samplePrompts?.map(prompt => ({\n          title: prompt.title,\n          message: prompt.message,\n          onClick: () => {\n            sendMessage(prompt.message);\n          },\n        }))\n      : [];\n\n  const handleFilter = React.useCallback((value: string) => {\n    setFilterValue(value);\n  }, []);\n\n  const onDrawerToggle = React.useCallback(() => {\n    setIsDrawerOpen(isOpen => !isOpen);\n  }, []);\n\n  const handleAttach = (data: File[], event: DropEvent) => {\n    event.preventDefault();\n    handleFileUpload(data);\n  };\n\n  if (error) {\n    return (\n      <Box padding={1}>\n        <ErrorPanel error={error} />\n      </Box>\n    );\n  }\n\n  return (\n    <>\n      {isDeleteModalOpen && (\n        <DeleteModal\n          isOpen={isDeleteModalOpen}\n          onClose={() => setIsDeleteModalOpen(false)}\n          onConfirm={handleDeleteConversation}\n        />\n      )}\n      <Chatbot\n        displayMode={ChatbotDisplayMode.embedded}\n        className={classes.body}\n      >\n        <ChatbotHeader className={classes.header}>\n          <ChatbotHeaderMain>\n            <ChatbotHeaderMenu\n              aria-expanded={isDrawerOpen}\n              onMenuToggle={() => setIsDrawerOpen(!isDrawerOpen)}\n              className={classes.headerMenu}\n            />\n            <ChatbotHeaderTitle className={classes.headerTitle}>\n              <Title headingLevel=\"h1\" size=\"3xl\">\n                Developer Hub Lightspeed\n              </Title>\n            </ChatbotHeaderTitle>\n          </ChatbotHeaderMain>\n\n          <LightspeedChatBoxHeader\n            selectedModel={selectedModel}\n            handleSelectedModel={item => handleSelectedModel(item)}\n            models={models}\n          />\n        </ChatbotHeader>\n        <ChatbotConversationHistoryNav\n          drawerPanelContentProps={{ isResizable: true, minSize: '200px' }}\n          reverseButtonOrder\n          displayMode={ChatbotDisplayMode.embedded}\n          onDrawerToggle={onDrawerToggle}\n          isDrawerOpen={isDrawerOpen}\n          setIsDrawerOpen={setIsDrawerOpen}\n          activeItemId={conversationId}\n          onSelectActiveItem={onSelectActiveItem}\n          conversations={filterConversations(filterValue)}\n          onNewChat={newChatCreated ? undefined : onNewChat}\n          handleTextInputChange={handleFilter}\n          drawerContent={\n            <>\n              <ChatbotContent>\n                <LightspeedChatBox\n                  userName={userName}\n                  messages={messages}\n                  profileLoading={profileLoading}\n                  announcement={announcement}\n                  ref={scrollToBottomRef}\n                  welcomePrompts={welcomePrompts}\n                />\n              </ChatbotContent>\n              <ChatbotFooter className={classes.footer}>\n                <FilePreview />\n                <MessageBar\n                  onSendMessage={sendMessage}\n                  isSendButtonDisabled={isSendButtonDisabled}\n                  hasAttachButton\n                  handleAttach={handleAttach}\n                  hasMicrophoneButton\n                />\n                <ChatbotFootnote {...getFootnoteProps(classes.footerPopover)} />\n              </ChatbotFooter>\n            </>\n          }\n        />\n      </Chatbot>\n      <Attachment />\n    </>\n  );\n};\n"],"names":["React","prompt"],"mappings":"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"}

package/dist/components/LightspeedChatBox.esm.js

@@ -1,6 +1,11 @@
 import React__default from 'react';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { makeStyles } from '@material-ui/core';
 import { MessageBox, ChatbotWelcomePrompt, Message } from '@patternfly/chatbot';
+import { Alert } from '@patternfly/react-core';
+import { FUNCTION_DISCLAIMER, FUNCTION_DISCLAIMER_WITHOUT_QUESTION_VALIDATION } from '../const.esm.js';
+import { useAutoScroll } from '../hooks/useAutoScroll.esm.js';
+import { useBufferedMessages } from '../hooks/useBufferedMessages.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   prompt: {
@@ -9,6 +14,9 @@ const useStyles = makeStyles((theme) => ({
   container: {
     maxWidth: "unset !important"
   },
+  alert: {
+    background: "unset !important"
+  },
   userMessageText: {
     "& div.pf-chatbot__message--user": {
       "& div.pf-chatbot__message-text": {
@@ -27,19 +35,62 @@ const LightspeedChatBox = React__default.forwardRef(
     profileLoading,
     welcomePrompts
   }, ref) => {
-    const [cmessages, setCMessages] = React__default.useState(messages);
     const classes = useStyles();
+    const scrollQueued = React__default.useRef(false);
+    const containerRef = React__default.useRef(null);
+    const configApi = useApi(configApiRef);
+    const questionValidationEnabled = configApi.getOptionalBoolean("lightspeed.questionValidation") ?? true;
+    const cmessages = useBufferedMessages(messages, 30);
+    const { autoScroll, scrollToBottom, scrollToTop } = useAutoScroll(containerRef);
+    React__default.useImperativeHandle(ref, () => ({
+      scrollToBottom: () => {
+        if (scrollQueued.current) return;
+        scrollQueued.current = true;
+        requestAnimationFrame(() => {
+          scrollToBottom();
+          scrollQueued.current = false;
+        });
+      }
+    }));
     React__default.useEffect(() => {
-      setCMessages(messages);
-    }, [messages]);
+      if (!autoScroll || scrollQueued.current) return undefined;
+      scrollQueued.current = true;
+      const rafId = requestAnimationFrame(() => {
+        const container = containerRef.current;
+        if (!container) return;
+        setTimeout(() => {
+          container.scrollTo({
+            top: container.scrollHeight,
+            behavior: "auto"
+          });
+        }, 0);
+        scrollQueued.current = false;
+      });
+      return () => {
+        cancelAnimationFrame(rafId);
+        scrollQueued.current = false;
+      };
+    }, [autoScroll, cmessages, containerRef]);
     const messageBoxClasses = `${classes.container} ${classes.userMessageText}`;
     return /* @__PURE__ */ React__default.createElement(
       MessageBox,
       {
         className: welcomePrompts.length ? `${messageBoxClasses} ${classes.prompt}` : messageBoxClasses,
         announcement,
-        style: { justifyContent: "flex-end" }
+        ref: containerRef,
+        onScrollToTopClick: scrollToTop,
+        onScrollToBottomClick: scrollToBottom
       },
+      /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
+        Alert,
+        {
+          title: "Important",
+          variant: "info",
+          isInline: true,
+          className: classes.alert
+        },
+        questionValidationEnabled ? FUNCTION_DISCLAIMER : FUNCTION_DISCLAIMER_WITHOUT_QUESTION_VALIDATION
+      ), /* @__PURE__ */ React__default.createElement("br", null)),
       welcomePrompts.length ? /* @__PURE__ */ React__default.createElement(
         ChatbotWelcomePrompt,
         {
@@ -50,7 +101,7 @@ const LightspeedChatBox = React__default.forwardRef(
       ) : /* @__PURE__ */ React__default.createElement("br", null),
       cmessages.map((message, index) => {
         if (index === cmessages.length - 1) {
-          return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: `${message.role}-${index}` }, /* @__PURE__ */ React__default.createElement(Message, { key: `${message.role}-${index}`, ...message }), /* @__PURE__ */ React__default.createElement("div", { ref }));
+          return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: `${message.role}-${index}` }, /* @__PURE__ */ React__default.createElement(Message, { key: `${message.role}-${index}`, ...message }));
         }
         return /* @__PURE__ */ React__default.createElement(Message, { key: `${message.role}-${index}`, ...message });
       })

package/dist/components/LightspeedChatBox.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightspeedChatBox.esm.js","sources":["../../src/components/LightspeedChatBox.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport { makeStyles } from '@material-ui/core';\nimport {\n  ChatbotWelcomePrompt,\n  Message,\n  MessageBox,\n  MessageProps,\n  WelcomePrompt,\n} from '@patternfly/chatbot';\n\nconst useStyles = makeStyles(theme => ({\n  prompt: {\n    'justify-content': 'flex-end',\n  },\n  container: {\n    maxWidth: 'unset !important',\n  },\n  userMessageText: {\n    '& div.pf-chatbot__message--user': {\n      '& div.pf-chatbot__message-text': {\n        '& p': {\n          color: theme.palette.common.white,\n        },\n      },\n    },\n  },\n}));\n\ntype LightspeedChatBoxProps = {\n  userName?: string;\n  messages: MessageProps[];\n  profileLoading: boolean;\n  announcement: string | undefined;\n  welcomePrompts: WelcomePrompt[];\n};\n\nexport const LightspeedChatBox = React.forwardRef(\n  (\n    {\n      userName,\n      messages,\n      announcement,\n      profileLoading,\n      welcomePrompts,\n    }: LightspeedChatBoxProps,\n    ref: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const [cmessages, setCMessages] = React.useState(messages);\n    const classes = useStyles();\n\n    React.useEffect(() => {\n      setCMessages(messages);\n    }, [messages]);\n\n    const messageBoxClasses = `${classes.container} ${classes.userMessageText}`;\n    return (\n      <MessageBox\n        className={\n          welcomePrompts.length\n            ? `${messageBoxClasses} ${classes.prompt}`\n            : messageBoxClasses\n        }\n        announcement={announcement}\n        style={{ justifyContent: 'flex-end' }}\n      >\n        {welcomePrompts.length ? (\n          <ChatbotWelcomePrompt\n            title={`Hello, ${profileLoading ? '...' : (userName ?? 'Guest')}`}\n            description=\"How can I help you today?\"\n            prompts={welcomePrompts}\n          />\n        ) : (\n          <br />\n        )}\n        {cmessages.map((message, index) => {\n          if (index === cmessages.length - 1) {\n            return (\n              <React.Fragment key={`${message.role}-${index}`}>\n                <Message key={`${message.role}-${index}`} {...message} />\n                <div ref={ref} />\n              </React.Fragment>\n            );\n          }\n          return <Message key={`${message.role}-${index}`} {...message} />;\n        })}\n      </MessageBox>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;AA2BA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,MAAQ,EAAA;AAAA,IACN,iBAAmB,EAAA;AAAA,GACrB;AAAA,EACA,SAAW,EAAA;AAAA,IACT,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,iCAAmC,EAAA;AAAA,MACjC,gCAAkC,EAAA;AAAA,QAChC,KAAO,EAAA;AAAA,UACL,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA;AAAA;AAC9B;AACF;AACF;AAEJ,CAAE,CAAA,CAAA;AAUK,MAAM,oBAAoBA,cAAM,CAAA,UAAA;AAAA,EACrC,CACE;AAAA,IACE,QAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,KAEF,GACG,KAAA;AACH,IAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAAA,cAAA,CAAM,SAAS,QAAQ,CAAA;AACzD,IAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,IAAAA,cAAA,CAAM,UAAU,MAAM;AACpB,MAAA,YAAA,CAAa,QAAQ,CAAA;AAAA,KACvB,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,IAAA,MAAM,oBAAoB,CAAG,EAAA,OAAA,CAAQ,SAAS,CAAA,CAAA,EAAI,QAAQ,eAAe,CAAA,CAAA;AACzE,IACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,SAAA,EACE,eAAe,MACX,GAAA,CAAA,EAAG,iBAAiB,CAAI,CAAA,EAAA,OAAA,CAAQ,MAAM,CACtC,CAAA,GAAA,iBAAA;AAAA,QAEN,YAAA;AAAA,QACA,KAAA,EAAO,EAAE,cAAA,EAAgB,UAAW;AAAA,OAAA;AAAA,MAEnC,eAAe,MACd,mBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,oBAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA,CAAA,OAAA,EAAU,cAAiB,GAAA,KAAA,GAAS,YAAY,OAAQ,CAAA,CAAA;AAAA,UAC/D,WAAY,EAAA,2BAAA;AAAA,UACZ,OAAS,EAAA;AAAA;AAAA,OACX,gDAEC,IAAG,EAAA,IAAA,CAAA;AAAA,MAEL,SAAU,CAAA,GAAA,CAAI,CAAC,OAAA,EAAS,KAAU,KAAA;AACjC,QAAI,IAAA,KAAA,KAAU,SAAU,CAAA,MAAA,GAAS,CAAG,EAAA;AAClC,UACE,uBAAAA,cAAA,CAAA,aAAA,CAACA,cAAM,CAAA,QAAA,EAAN,EAAe,GAAA,EAAK,CAAG,EAAA,OAAA,CAAQ,IAAI,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA,EAAA,kBAC1CA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,KAAK,CAAG,EAAA,OAAA,CAAQ,IAAI,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA,EAAK,GAAG,OAAA,EAAS,CACvD,kBAAAA,cAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAU,CACjB,CAAA;AAAA;AAGJ,QAAO,uBAAAA,cAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,GAAA,EAAK,CAAG,EAAA,OAAA,CAAQ,IAAI,CAAI,CAAA,EAAA,KAAK,CAAK,CAAA,EAAA,GAAG,OAAS,EAAA,CAAA;AAAA,OAC/D;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"LightspeedChatBox.esm.js","sources":["../../src/components/LightspeedChatBox.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport { makeStyles } from '@material-ui/core';\nimport {\n  ChatbotWelcomePrompt,\n  Message,\n  MessageBox,\n  MessageBoxHandle,\n  MessageProps,\n  WelcomePrompt,\n} from '@patternfly/chatbot';\nimport { Alert } from '@patternfly/react-core';\n\nimport {\n  FUNCTION_DISCLAIMER,\n  FUNCTION_DISCLAIMER_WITHOUT_QUESTION_VALIDATION,\n} from '../const';\nimport { useAutoScroll } from '../hooks/useAutoScroll';\nimport { useBufferedMessages } from '../hooks/useBufferedMessages';\n\nconst useStyles = makeStyles(theme => ({\n  prompt: {\n    'justify-content': 'flex-end',\n  },\n  container: {\n    maxWidth: 'unset !important',\n  },\n  alert: {\n    background: 'unset !important',\n  },\n  userMessageText: {\n    '& div.pf-chatbot__message--user': {\n      '& div.pf-chatbot__message-text': {\n        '& p': {\n          color: theme.palette.common.white,\n        },\n      },\n    },\n  },\n}));\n\ntype LightspeedChatBoxProps = {\n  userName?: string;\n  messages: MessageProps[];\n  profileLoading: boolean;\n  announcement: string | undefined;\n  welcomePrompts: WelcomePrompt[];\n};\n\nexport interface ScrollContainerHandle {\n  scrollToBottom: () => void;\n}\n\nexport const LightspeedChatBox = React.forwardRef(\n  (\n    {\n      userName,\n      messages,\n      announcement,\n      profileLoading,\n      welcomePrompts,\n    }: LightspeedChatBoxProps,\n    ref: React.ForwardedRef<ScrollContainerHandle>,\n  ) => {\n    const classes = useStyles();\n    const scrollQueued = React.useRef(false);\n    const containerRef = React.useRef<MessageBoxHandle>(null);\n\n    const configApi = useApi(configApiRef);\n    const questionValidationEnabled =\n      configApi.getOptionalBoolean('lightspeed.questionValidation') ?? true;\n    const cmessages = useBufferedMessages(messages, 30);\n    const { autoScroll, scrollToBottom, scrollToTop } =\n      useAutoScroll(containerRef);\n\n    React.useImperativeHandle(ref, () => ({\n      scrollToBottom: () => {\n        if (scrollQueued.current) return;\n        scrollQueued.current = true;\n\n        requestAnimationFrame(() => {\n          scrollToBottom();\n          scrollQueued.current = false;\n        });\n      },\n    }));\n\n    // Auto-scrolls to the latest message\n    React.useEffect(() => {\n      if (!autoScroll || scrollQueued.current) return undefined;\n\n      scrollQueued.current = true;\n\n      const rafId = requestAnimationFrame(() => {\n        const container = containerRef.current;\n        if (!container) return;\n\n        setTimeout(() => {\n          container.scrollTo({\n            top: container.scrollHeight,\n            behavior: 'auto',\n          });\n        }, 0);\n\n        scrollQueued.current = false;\n      });\n\n      return () => {\n        cancelAnimationFrame(rafId);\n        scrollQueued.current = false;\n      };\n\n      // eslint-disable-next-line\n    }, [autoScroll, cmessages, containerRef]);\n\n    const messageBoxClasses = `${classes.container} ${classes.userMessageText}`;\n    return (\n      <MessageBox\n        className={\n          welcomePrompts.length\n            ? `${messageBoxClasses} ${classes.prompt}`\n            : messageBoxClasses\n        }\n        announcement={announcement}\n        ref={containerRef}\n        onScrollToTopClick={scrollToTop}\n        onScrollToBottomClick={scrollToBottom}\n      >\n        <div>\n          <Alert\n            title=\"Important\"\n            variant=\"info\"\n            isInline\n            className={classes.alert}\n          >\n            {questionValidationEnabled\n              ? FUNCTION_DISCLAIMER\n              : FUNCTION_DISCLAIMER_WITHOUT_QUESTION_VALIDATION}\n          </Alert>\n          <br />\n        </div>\n        {welcomePrompts.length ? (\n          <ChatbotWelcomePrompt\n            title={`Hello, ${profileLoading ? '...' : (userName ?? 'Guest')}`}\n            description=\"How can I help you today?\"\n            prompts={welcomePrompts}\n          />\n        ) : (\n          <br />\n        )}\n        {cmessages.map((message, index) => {\n          if (index === cmessages.length - 1) {\n            return (\n              <React.Fragment key={`${message.role}-${index}`}>\n                <Message key={`${message.role}-${index}`} {...message} />\n              </React.Fragment>\n            );\n          }\n          return <Message key={`${message.role}-${index}`} {...message} />;\n        })}\n      </MessageBox>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

package/dist/components/LightspeedPage.esm.js

@@ -7,6 +7,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { useAllModels } from '../hooks/useAllModels.esm.js';
 import { useLightspeedViewPermission } from '../hooks/useLightspeedViewPermission.esm.js';
 import queryClient from '../utils/queryClient.esm.js';
+import FileAttachmentContextProvider from './AttachmentContext.esm.js';
 import { LightspeedChat } from './LightSpeedChat.esm.js';
 import PermissionRequiredState from './PermissionRequiredState.esm.js';
 
@@ -49,7 +50,7 @@ const LightspeedPageInner = () => {
   if (loading) {
     return null;
   }
-  return /* @__PURE__ */ React__default.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React__default.createElement(Content, { className: classes.container }, !hasViewAccess ? /* @__PURE__ */ React__default.createElement(PermissionRequiredState, null) : /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Page, { themeId: "tool" }, /* @__PURE__ */ React__default.createElement(Content, { className: classes.container }, !hasViewAccess ? /* @__PURE__ */ React__default.createElement(PermissionRequiredState, null) : /* @__PURE__ */ React__default.createElement(FileAttachmentContextProvider, null, /* @__PURE__ */ React__default.createElement(
     LightspeedChat,
     {
       selectedModel,
@@ -61,7 +62,7 @@ const LightspeedPageInner = () => {
       avatar: profile?.picture,
       profileLoading
     }
-  )));
+  ))));
 };
 const LightspeedPage = () => {
   return /* @__PURE__ */ React__default.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React__default.createElement(LightspeedPageInner, null));

package/dist/components/LightspeedPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightspeedPage.esm.js","sources":["../../src/components/LightspeedPage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { useAsync } from 'react-use';\n\nimport { Content, Page } from '@backstage/core-components';\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport { createStyles, makeStyles, useTheme } from '@material-ui/core/styles';\nimport { QueryClientProvider } from '@tanstack/react-query';\n\nimport { useAllModels } from '../hooks/useAllModels';\nimport { useLightspeedViewPermission } from '../hooks/useLightspeedViewPermission';\nimport queryClient from '../utils/queryClient';\nimport { LightspeedChat } from './LightSpeedChat';\nimport PermissionRequiredState from './PermissionRequiredState';\n\nconst useStyles = makeStyles(() =>\n  createStyles({\n    container: {\n      padding: '0px',\n    },\n  }),\n);\n\nconst THEME_DARK = 'dark';\nconst THEME_DARK_CLASS = 'pf-v6-theme-dark';\n\nconst LightspeedPageInner = () => {\n  const classes = useStyles();\n  const {\n    palette: { type },\n  } = useTheme();\n\n  const identityApi = useApi(identityApiRef);\n\n  const { data: models } = useAllModels();\n  const { allowed: hasViewAccess, loading } = useLightspeedViewPermission();\n\n  const { value: profile, loading: profileLoading } = useAsync(\n    async () => await identityApi.getProfileInfo(),\n  );\n\n  const [selectedModel, setSelectedModel] = React.useState('');\n\n  const modelsItems = React.useMemo(\n    () => (models ? models.map(m => ({ label: m.id, value: m.id })) : []),\n    [models],\n  );\n\n  React.useEffect(() => {\n    const htmlTagElement = document.documentElement;\n    if (type === THEME_DARK) {\n      htmlTagElement.classList.add(THEME_DARK_CLASS);\n    } else {\n      htmlTagElement.classList.remove(THEME_DARK_CLASS);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [type]);\n\n  React.useEffect(() => {\n    if (modelsItems.length > 0) setSelectedModel(modelsItems[0].value);\n  }, [modelsItems]);\n\n  if (loading) {\n    return null;\n  }\n\n  return (\n    <Page themeId=\"tool\">\n      <Content className={classes.container}>\n        {!hasViewAccess ? (\n          <PermissionRequiredState />\n        ) : (\n          <LightspeedChat\n            selectedModel={selectedModel}\n            handleSelectedModel={item => {\n              setSelectedModel(item);\n            }}\n            models={modelsItems}\n            userName={profile?.displayName}\n            avatar={profile?.picture}\n            profileLoading={profileLoading}\n          />\n        )}\n      </Content>\n    </Page>\n  );\n};\n\nexport const LightspeedPage = () => {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <LightspeedPageInner />\n    </QueryClientProvider>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;AA+BA,MAAM,SAAY,GAAA,UAAA;AAAA,EAAW,MAC3B,YAAa,CAAA;AAAA,IACX,SAAW,EAAA;AAAA,MACT,OAAS,EAAA;AAAA;AACX,GACD;AACH,CAAA;AAEA,MAAM,UAAa,GAAA,MAAA;AACnB,MAAM,gBAAmB,GAAA,kBAAA;AAEzB,MAAM,sBAAsB,MAAM;AAChC,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA;AAAA,IACJ,OAAA,EAAS,EAAE,IAAK;AAAA,MACd,QAAS,EAAA;AAEb,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AAEzC,EAAA,MAAM,EAAE,IAAA,EAAM,MAAO,EAAA,GAAI,YAAa,EAAA;AACtC,EAAA,MAAM,EAAE,OAAA,EAAS,aAAe,EAAA,OAAA,KAAY,2BAA4B,EAAA;AAExE,EAAA,MAAM,EAAE,KAAA,EAAO,OAAS,EAAA,OAAA,EAAS,gBAAmB,GAAA,QAAA;AAAA,IAClD,YAAY,MAAM,WAAA,CAAY,cAAe;AAAA,GAC/C;AAEA,EAAA,MAAM,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAAA,cAAA,CAAM,SAAS,EAAE,CAAA;AAE3D,EAAA,MAAM,cAAcA,cAAM,CAAA,OAAA;AAAA,IACxB,MAAO,MAAA,GAAS,MAAO,CAAA,GAAA,CAAI,QAAM,EAAE,KAAA,EAAO,CAAE,CAAA,EAAA,EAAI,KAAO,EAAA,CAAA,CAAE,EAAG,EAAA,CAAE,IAAI,EAAC;AAAA,IACnE,CAAC,MAAM;AAAA,GACT;AAEA,EAAAA,cAAA,CAAM,UAAU,MAAM;AACpB,IAAA,MAAM,iBAAiB,QAAS,CAAA,eAAA;AAChC,IAAA,IAAI,SAAS,UAAY,EAAA;AACvB,MAAe,cAAA,CAAA,SAAA,CAAU,IAAI,gBAAgB,CAAA;AAAA,KACxC,MAAA;AACL,MAAe,cAAA,CAAA,SAAA,CAAU,OAAO,gBAAgB,CAAA;AAAA;AAClD,GAEF,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAAA,cAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,YAAY,MAAS,GAAA,CAAA,mBAAoB,WAAY,CAAA,CAAC,EAAE,KAAK,CAAA;AAAA,GACnE,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAA,kBACXA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,SAAW,EAAA,OAAA,CAAQ,SACzB,EAAA,EAAA,CAAC,aACA,mBAAAA,cAAA,CAAA,aAAA,CAAC,6BAAwB,CAEzB,mBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,aAAA;AAAA,MACA,qBAAqB,CAAQ,IAAA,KAAA;AAC3B,QAAA,gBAAA,CAAiB,IAAI,CAAA;AAAA,OACvB;AAAA,MACA,MAAQ,EAAA,WAAA;AAAA,MACR,UAAU,OAAS,EAAA,WAAA;AAAA,MACnB,QAAQ,OAAS,EAAA,OAAA;AAAA,MACjB;AAAA;AAAA,GAGN,CACF,CAAA;AAEJ,CAAA;AAEO,MAAM,iBAAiB,MAAM;AAClC,EAAA,oDACG,mBAAoB,EAAA,EAAA,MAAA,EAAQ,WAC3B,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,yBAAoB,CACvB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LightspeedPage.esm.js","sources":["../../src/components/LightspeedPage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { useAsync } from 'react-use';\n\nimport { Content, Page } from '@backstage/core-components';\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\n\nimport { createStyles, makeStyles, useTheme } from '@material-ui/core/styles';\nimport { QueryClientProvider } from '@tanstack/react-query';\n\nimport { useAllModels } from '../hooks/useAllModels';\nimport { useLightspeedViewPermission } from '../hooks/useLightspeedViewPermission';\nimport queryClient from '../utils/queryClient';\nimport FileAttachmentContextProvider from './AttachmentContext';\nimport { LightspeedChat } from './LightSpeedChat';\nimport PermissionRequiredState from './PermissionRequiredState';\n\nconst useStyles = makeStyles(() =>\n  createStyles({\n    container: {\n      padding: '0px',\n    },\n  }),\n);\n\nconst THEME_DARK = 'dark';\nconst THEME_DARK_CLASS = 'pf-v6-theme-dark';\n\nconst LightspeedPageInner = () => {\n  const classes = useStyles();\n  const {\n    palette: { type },\n  } = useTheme();\n\n  const identityApi = useApi(identityApiRef);\n\n  const { data: models } = useAllModels();\n  const { allowed: hasViewAccess, loading } = useLightspeedViewPermission();\n\n  const { value: profile, loading: profileLoading } = useAsync(\n    async () => await identityApi.getProfileInfo(),\n  );\n\n  const [selectedModel, setSelectedModel] = React.useState('');\n\n  const modelsItems = React.useMemo(\n    () => (models ? models.map(m => ({ label: m.id, value: m.id })) : []),\n    [models],\n  );\n\n  React.useEffect(() => {\n    const htmlTagElement = document.documentElement;\n    if (type === THEME_DARK) {\n      htmlTagElement.classList.add(THEME_DARK_CLASS);\n    } else {\n      htmlTagElement.classList.remove(THEME_DARK_CLASS);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [type]);\n\n  React.useEffect(() => {\n    if (modelsItems.length > 0) setSelectedModel(modelsItems[0].value);\n  }, [modelsItems]);\n\n  if (loading) {\n    return null;\n  }\n\n  return (\n    <Page themeId=\"tool\">\n      <Content className={classes.container}>\n        {!hasViewAccess ? (\n          <PermissionRequiredState />\n        ) : (\n          <FileAttachmentContextProvider>\n            <LightspeedChat\n              selectedModel={selectedModel}\n              handleSelectedModel={item => {\n                setSelectedModel(item);\n              }}\n              models={modelsItems}\n              userName={profile?.displayName}\n              avatar={profile?.picture}\n              profileLoading={profileLoading}\n            />\n          </FileAttachmentContextProvider>\n        )}\n      </Content>\n    </Page>\n  );\n};\n\nexport const LightspeedPage = () => {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <LightspeedPageInner />\n    </QueryClientProvider>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAgCA,MAAM,SAAY,GAAA,UAAA;AAAA,EAAW,MAC3B,YAAa,CAAA;AAAA,IACX,SAAW,EAAA;AAAA,MACT,OAAS,EAAA;AAAA;AACX,GACD;AACH,CAAA;AAEA,MAAM,UAAa,GAAA,MAAA;AACnB,MAAM,gBAAmB,GAAA,kBAAA;AAEzB,MAAM,sBAAsB,MAAM;AAChC,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA;AAAA,IACJ,OAAA,EAAS,EAAE,IAAK;AAAA,MACd,QAAS,EAAA;AAEb,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AAEzC,EAAA,MAAM,EAAE,IAAA,EAAM,MAAO,EAAA,GAAI,YAAa,EAAA;AACtC,EAAA,MAAM,EAAE,OAAA,EAAS,aAAe,EAAA,OAAA,KAAY,2BAA4B,EAAA;AAExE,EAAA,MAAM,EAAE,KAAA,EAAO,OAAS,EAAA,OAAA,EAAS,gBAAmB,GAAA,QAAA;AAAA,IAClD,YAAY,MAAM,WAAA,CAAY,cAAe;AAAA,GAC/C;AAEA,EAAA,MAAM,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAAA,cAAA,CAAM,SAAS,EAAE,CAAA;AAE3D,EAAA,MAAM,cAAcA,cAAM,CAAA,OAAA;AAAA,IACxB,MAAO,MAAA,GAAS,MAAO,CAAA,GAAA,CAAI,QAAM,EAAE,KAAA,EAAO,CAAE,CAAA,EAAA,EAAI,KAAO,EAAA,CAAA,CAAE,EAAG,EAAA,CAAE,IAAI,EAAC;AAAA,IACnE,CAAC,MAAM;AAAA,GACT;AAEA,EAAAA,cAAA,CAAM,UAAU,MAAM;AACpB,IAAA,MAAM,iBAAiB,QAAS,CAAA,eAAA;AAChC,IAAA,IAAI,SAAS,UAAY,EAAA;AACvB,MAAe,cAAA,CAAA,SAAA,CAAU,IAAI,gBAAgB,CAAA;AAAA,KACxC,MAAA;AACL,MAAe,cAAA,CAAA,SAAA,CAAU,OAAO,gBAAgB,CAAA;AAAA;AAClD,GAEF,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAAA,cAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,YAAY,MAAS,GAAA,CAAA,mBAAoB,WAAY,CAAA,CAAC,EAAE,KAAK,CAAA;AAAA,GACnE,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAA,+CACX,OAAQ,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,SAAA,EAAA,EACzB,CAAC,aACA,mBAAAA,cAAA,CAAA,aAAA,CAAC,uBAAwB,EAAA,IAAA,CAAA,gDAExB,6BACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,aAAA;AAAA,MACA,qBAAqB,CAAQ,IAAA,KAAA;AAC3B,QAAA,gBAAA,CAAiB,IAAI,CAAA;AAAA,OACvB;AAAA,MACA,MAAQ,EAAA,WAAA;AAAA,MACR,UAAU,OAAS,EAAA,WAAA;AAAA,MACnB,QAAQ,OAAS,EAAA,OAAA;AAAA,MACjB;AAAA;AAAA,GAEJ,CAEJ,CACF,CAAA;AAEJ,CAAA;AAEO,MAAM,iBAAiB,MAAM;AAClC,EAAA,oDACG,mBAAoB,EAAA,EAAA,MAAA,EAAQ,WAC3B,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,yBAAoB,CACvB,CAAA;AAEJ;;;;"}

package/dist/const.esm.js

@@ -1,4 +1,61 @@
 const TEMP_CONVERSATION_ID = "temp-conversation-id";
+const FUNCTION_DISCLAIMER_WITHOUT_QUESTION_VALIDATION = `Red Hat Developer Hub Lightspeed can answer questions on many topics using your configured models. Lightspeed's responses are influenced by the Red Hat Developer Hub documentation but Lightspeed does not have access to your Software Catalog, TechDocs, or Templates etc. Do not include personal or sensitive information in your input. Interactions with Developer Hub Lightspeed may be reviewed and used to improve products or services.`;
+const FUNCTION_DISCLAIMER = `Red Hat Developer Hub Lightspeed can answer questions on many topics using your configured models. Lightspeed's responses are influenced by the Red Hat Developer Hub documentation but Lightspeed does not have access to your Software Catalog, TechDocs, or Templates etc. Lightspeed uses question (prompt) validation to ensure that conversations remain focused on technical topics relevant to Red Hat Developer Hub, such as Backstage, Kubernetes, and OpenShift. Do not include personal or sensitive information in your input. Interactions with Developer Hub Lightspeed may be reviewed and used to improve products or services.`;
+const createPrompt = (title, message) => {
+  return { title, message };
+};
+const DEFAULT_SAMPLE_PROMPTS = [
+  createPrompt(
+    "Get Help On Code Readability",
+    "Can you suggest techniques I can use to make my code more readable and maintainable?"
+  ),
+  createPrompt(
+    "Get Help With Debugging",
+    "My application is throwing an error when trying to connect to the database. Can you help me identify the issue?"
+  ),
+  createPrompt(
+    "Explain a Development Concept",
+    "Can you explain how microservices architecture works and its advantages over a monolithic design?"
+  ),
+  createPrompt(
+    "Suggest Code Optimizations",
+    "Can you suggest common ways to optimize code to achieve better performance?"
+  ),
+  createPrompt(
+    "Documentation Summary",
+    "Can you summarize the documentation for implementing OAuth 2.0 authentication in a web app?"
+  ),
+  createPrompt(
+    "Workflows With Git",
+    "I want to make changes to code on another branch without loosing my existing work. What is the procedure to do this using Git?"
+  ),
+  createPrompt(
+    "Suggest Testing Strategies",
+    "Can you recommend some common testing strategies that will make my application robust and error-free?"
+  ),
+  createPrompt(
+    "Demystify Sorting Algorithms",
+    "Can you explain the difference between a quicksort and a merge sort algorithm, and when to use each?"
+  ),
+  createPrompt(
+    "Understand Event-Driven Architecture",
+    "Can you explain what event-driven architecture is and when it\u2019s beneficial to use it in software development?"
+  )
+];
+const RHDH_SAMPLE_PROMPTS = [
+  createPrompt(
+    "Deploy With Tekton",
+    "Can you help me automate the deployment of my application using Tekton pipelines?"
+  ),
+  createPrompt(
+    "Create An OpenShift Deployment",
+    "Can you guide me through creating a new deployment in OpenShift for a containerized application?"
+  ),
+  createPrompt(
+    "Getting Started with Backstage",
+    "Can you guide me through the first steps to start using Backstage as a developer, like exploring the Software Catalog and adding my service?"
+  )
+];
 
-export { TEMP_CONVERSATION_ID };
+export { DEFAULT_SAMPLE_PROMPTS, FUNCTION_DISCLAIMER, FUNCTION_DISCLAIMER_WITHOUT_QUESTION_VALIDATION, RHDH_SAMPLE_PROMPTS, TEMP_CONVERSATION_ID };
 //# sourceMappingURL=const.esm.js.map

package/dist/const.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.esm.js","sources":["../src/const.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nexport const TEMP_CONVERSATION_ID = 'temp-conversation-id';\n"],"names":[],"mappings":"AAeO,MAAM,oBAAuB,GAAA;;;;"}
+{"version":3,"file":"const.esm.js","sources":["../src/const.ts"],"sourcesContent":["import { SamplePrompts } from './types';\n\n/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nexport const TEMP_CONVERSATION_ID = 'temp-conversation-id';\n\nexport const FUNCTION_DISCLAIMER_WITHOUT_QUESTION_VALIDATION = `Red Hat Developer Hub Lightspeed can answer questions on many topics using your configured models. Lightspeed's responses are influenced by the Red Hat Developer Hub documentation but Lightspeed does not have access to your Software Catalog, TechDocs, or Templates etc. Do not include personal or sensitive information in your input. Interactions with Developer Hub Lightspeed may be reviewed and used to improve products or services.`;\n\nexport const FUNCTION_DISCLAIMER = `Red Hat Developer Hub Lightspeed can answer questions on many topics using your configured models. Lightspeed's responses are influenced by the Red Hat Developer Hub documentation but Lightspeed does not have access to your Software Catalog, TechDocs, or Templates etc. Lightspeed uses question (prompt) validation to ensure that conversations remain focused on technical topics relevant to Red Hat Developer Hub, such as Backstage, Kubernetes, and OpenShift. Do not include personal or sensitive information in your input. Interactions with Developer Hub Lightspeed may be reviewed and used to improve products or services.`;\n\nconst createPrompt = (title: string, message: string) => {\n  return { title, message };\n};\n\nexport const DEFAULT_SAMPLE_PROMPTS: SamplePrompts = [\n  createPrompt(\n    'Get Help On Code Readability',\n    'Can you suggest techniques I can use to make my code more readable and maintainable?',\n  ),\n  createPrompt(\n    'Get Help With Debugging',\n    'My application is throwing an error when trying to connect to the database. Can you help me identify the issue?',\n  ),\n  createPrompt(\n    'Explain a Development Concept',\n    'Can you explain how microservices architecture works and its advantages over a monolithic design?',\n  ),\n  createPrompt(\n    'Suggest Code Optimizations',\n    'Can you suggest common ways to optimize code to achieve better performance?',\n  ),\n  createPrompt(\n    'Documentation Summary',\n    'Can you summarize the documentation for implementing OAuth 2.0 authentication in a web app?',\n  ),\n  createPrompt(\n    'Workflows With Git',\n    'I want to make changes to code on another branch without loosing my existing work. What is the procedure to do this using Git?',\n  ),\n  createPrompt(\n    'Suggest Testing Strategies',\n    'Can you recommend some common testing strategies that will make my application robust and error-free?',\n  ),\n  createPrompt(\n    'Demystify Sorting Algorithms',\n    'Can you explain the difference between a quicksort and a merge sort algorithm, and when to use each?',\n  ),\n  createPrompt(\n    'Understand Event-Driven Architecture',\n    'Can you explain what event-driven architecture is and when it’s beneficial to use it in software development?',\n  ),\n];\n\nexport const RHDH_SAMPLE_PROMPTS: SamplePrompts = [\n  createPrompt(\n    'Deploy With Tekton',\n    'Can you help me automate the deployment of my application using Tekton pipelines?',\n  ),\n  createPrompt(\n    'Create An OpenShift Deployment',\n    'Can you guide me through creating a new deployment in OpenShift for a containerized application?',\n  ),\n  createPrompt(\n    'Getting Started with Backstage',\n    'Can you guide me through the first steps to start using Backstage as a developer, like exploring the Software Catalog and adding my service?',\n  ),\n];\n"],"names":[],"mappings":"AAiBO,MAAM,oBAAuB,GAAA;AAE7B,MAAM,+CAAkD,GAAA,CAAA,kbAAA;AAExD,MAAM,mBAAsB,GAAA,CAAA,gnBAAA;AAEnC,MAAM,YAAA,GAAe,CAAC,KAAA,EAAe,OAAoB,KAAA;AACvD,EAAO,OAAA,EAAE,OAAO,OAAQ,EAAA;AAC1B,CAAA;AAEO,MAAM,sBAAwC,GAAA;AAAA,EACnD,YAAA;AAAA,IACE,8BAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,YAAA;AAAA,IACE,yBAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,YAAA;AAAA,IACE,+BAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,YAAA;AAAA,IACE,4BAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,YAAA;AAAA,IACE,uBAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,YAAA;AAAA,IACE,oBAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,YAAA;AAAA,IACE,4BAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,YAAA;AAAA,IACE,8BAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,YAAA;AAAA,IACE,sCAAA;AAAA,IACA;AAAA;AAEJ;AAEO,MAAM,mBAAqC,GAAA;AAAA,EAChD,YAAA;AAAA,IACE,oBAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,YAAA;AAAA,IACE,gCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,YAAA;AAAA,IACE,gCAAA;AAAA,IACA;AAAA;AAEJ;;;;"}

package/dist/hooks/useAutoScroll.esm.js

@@ -0,0 +1,78 @@
+import React__default from 'react';
+
+const useAutoScroll = (containerRef, options = {}) => {
+  const { deltaUp = 10, deltaDown = 60, delay = 200 } = options;
+  const [autoScroll, setAutoScroll] = React__default.useState(true);
+  const lastScrollTop = React__default.useRef(0);
+  const manualScrollInterrupted = React__default.useRef(false);
+  const debounceTimeout = React__default.useRef(null);
+  const onScroll = React__default.useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const currentScrollTop = container.scrollTop;
+    const isScrollingDown = currentScrollTop > lastScrollTop.current;
+    const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+    const delta = isScrollingDown ? deltaDown : deltaUp;
+    const isAtBottom = distanceFromBottom <= delta;
+    if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
+    if (isAtBottom && manualScrollInterrupted.current && isScrollingDown) {
+      debounceTimeout.current = setTimeout(() => {
+        manualScrollInterrupted.current = false;
+        setAutoScroll(true);
+      }, delay);
+    }
+    if (!isAtBottom && !manualScrollInterrupted.current) {
+      manualScrollInterrupted.current = true;
+      setAutoScroll(false);
+    }
+    lastScrollTop.current = currentScrollTop;
+  }, [containerRef, deltaUp, deltaDown, delay]);
+  React__default.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return undefined;
+    }
+    container.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      container.removeEventListener("scroll", onScroll);
+      if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
+    };
+  }, [onScroll, containerRef]);
+  const resumeAutoScroll = React__default.useCallback(() => {
+    manualScrollInterrupted.current = false;
+    setAutoScroll(true);
+  }, []);
+  const stopAutoScroll = React__default.useCallback(() => {
+    manualScrollInterrupted.current = true;
+    setAutoScroll(false);
+  }, []);
+  const scrollToTop = React__default.useCallback(() => {
+    stopAutoScroll();
+    const container = containerRef.current;
+    if (!container) return;
+    container.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  }, [stopAutoScroll, containerRef]);
+  const scrollToBottom = React__default.useCallback(() => {
+    const container = containerRef.current;
+    if (container) {
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: "smooth"
+      });
+    }
+    resumeAutoScroll();
+  }, [resumeAutoScroll, containerRef]);
+  return {
+    autoScroll,
+    resumeAutoScroll,
+    stopAutoScroll,
+    scrollToBottom,
+    scrollToTop
+  };
+};
+
+export { useAutoScroll };
+//# sourceMappingURL=useAutoScroll.esm.js.map

package/dist/hooks/useAutoScroll.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoScroll.esm.js","sources":["../../src/hooks/useAutoScroll.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\ninterface useAutoScrollOptions {\n  deltaUp?: number;\n  deltaDown?: number;\n  delay?: number;\n}\n\nexport const useAutoScroll = (\n  containerRef: React.RefObject<HTMLElement>,\n  options: useAutoScrollOptions = {},\n) => {\n  const { deltaUp = 10, deltaDown = 60, delay = 200 } = options;\n\n  const [autoScroll, setAutoScroll] = React.useState(true);\n  const lastScrollTop = React.useRef(0);\n  const manualScrollInterrupted = React.useRef(false);\n  const debounceTimeout = React.useRef<NodeJS.Timeout | null>(null);\n\n  const onScroll = React.useCallback(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const currentScrollTop = container.scrollTop;\n    const isScrollingDown = currentScrollTop > lastScrollTop.current;\n\n    const distanceFromBottom =\n      container.scrollHeight - container.scrollTop - container.clientHeight;\n\n    const delta = isScrollingDown ? deltaDown : deltaUp;\n    const isAtBottom = distanceFromBottom <= delta;\n\n    if (debounceTimeout.current) clearTimeout(debounceTimeout.current);\n\n    if (isAtBottom && manualScrollInterrupted.current && isScrollingDown) {\n      debounceTimeout.current = setTimeout(() => {\n        manualScrollInterrupted.current = false;\n        setAutoScroll(true);\n      }, delay);\n    }\n\n    if (!isAtBottom && !manualScrollInterrupted.current) {\n      manualScrollInterrupted.current = true;\n      setAutoScroll(false);\n    }\n\n    lastScrollTop.current = currentScrollTop;\n  }, [containerRef, deltaUp, deltaDown, delay]);\n\n  React.useEffect(() => {\n    const container = containerRef.current;\n    if (!container) {\n      return undefined;\n    }\n\n    container.addEventListener('scroll', onScroll, { passive: true });\n    return () => {\n      container.removeEventListener('scroll', onScroll);\n      if (debounceTimeout.current) clearTimeout(debounceTimeout.current);\n    };\n  }, [onScroll, containerRef]);\n\n  const resumeAutoScroll = React.useCallback(() => {\n    manualScrollInterrupted.current = false;\n    setAutoScroll(true);\n  }, []);\n\n  const stopAutoScroll = React.useCallback(() => {\n    manualScrollInterrupted.current = true;\n    setAutoScroll(false);\n  }, []);\n\n  const scrollToTop = React.useCallback(() => {\n    stopAutoScroll();\n    const container = containerRef.current;\n    if (!container) return;\n\n    container.scrollTo({\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [stopAutoScroll, containerRef]);\n\n  const scrollToBottom = React.useCallback(() => {\n    const container = containerRef.current;\n    if (container) {\n      container.scrollTo({\n        top: container.scrollHeight,\n        behavior: 'smooth',\n      });\n    }\n    resumeAutoScroll();\n  }, [resumeAutoScroll, containerRef]);\n\n  return {\n    autoScroll,\n    resumeAutoScroll,\n    stopAutoScroll,\n    scrollToBottom,\n    scrollToTop,\n  };\n};\n"],"names":["React"],"mappings":"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"}

package/dist/hooks/useBufferedMessages.esm.js

@@ -0,0 +1,27 @@
+import React__default from 'react';
+
+const useBufferedMessages = (messages, interval = 30) => {
+  const [bufferedMessages, setBufferedMessages] = React__default.useState(messages);
+  const lastUpdateTime = React__default.useRef(0);
+  const animationFrame = React__default.useRef(null);
+  React__default.useEffect(() => {
+    const now = Date.now();
+    const update = () => {
+      setBufferedMessages(messages);
+      lastUpdateTime.current = now;
+    };
+    if (now - lastUpdateTime.current > interval) {
+      update();
+    } else {
+      if (animationFrame.current) cancelAnimationFrame(animationFrame.current);
+      animationFrame.current = requestAnimationFrame(update);
+    }
+    return () => {
+      if (animationFrame.current) cancelAnimationFrame(animationFrame.current);
+    };
+  }, [messages, interval]);
+  return bufferedMessages;
+};
+
+export { useBufferedMessages };
+//# sourceMappingURL=useBufferedMessages.esm.js.map

package/dist/hooks/useBufferedMessages.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBufferedMessages.esm.js","sources":["../../src/hooks/useBufferedMessages.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nexport const useBufferedMessages = <T>(messages: T[], interval = 30): T[] => {\n  const [bufferedMessages, setBufferedMessages] = React.useState(messages);\n  const lastUpdateTime = React.useRef(0);\n  const animationFrame = React.useRef<number | null>(null);\n\n  React.useEffect(() => {\n    const now = Date.now();\n\n    const update = () => {\n      setBufferedMessages(messages);\n      lastUpdateTime.current = now;\n    };\n\n    if (now - lastUpdateTime.current > interval) {\n      update();\n    } else {\n      if (animationFrame.current) cancelAnimationFrame(animationFrame.current);\n      animationFrame.current = requestAnimationFrame(update);\n    }\n\n    return () => {\n      if (animationFrame.current) cancelAnimationFrame(animationFrame.current);\n    };\n  }, [messages, interval]);\n\n  return bufferedMessages;\n};\n"],"names":["React"],"mappings":";;AAiBO,MAAM,mBAAsB,GAAA,CAAI,QAAe,EAAA,QAAA,GAAW,EAAY,KAAA;AAC3E,EAAA,MAAM,CAAC,gBAAkB,EAAA,mBAAmB,CAAI,GAAAA,cAAA,CAAM,SAAS,QAAQ,CAAA;AACvE,EAAM,MAAA,cAAA,GAAiBA,cAAM,CAAA,MAAA,CAAO,CAAC,CAAA;AACrC,EAAM,MAAA,cAAA,GAAiBA,cAAM,CAAA,MAAA,CAAsB,IAAI,CAAA;AAEvD,EAAAA,cAAA,CAAM,UAAU,MAAM;AACpB,IAAM,MAAA,GAAA,GAAM,KAAK,GAAI,EAAA;AAErB,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,mBAAA,CAAoB,QAAQ,CAAA;AAC5B,MAAA,cAAA,CAAe,OAAU,GAAA,GAAA;AAAA,KAC3B;AAEA,IAAI,IAAA,GAAA,GAAM,cAAe,CAAA,OAAA,GAAU,QAAU,EAAA;AAC3C,MAAO,MAAA,EAAA;AAAA,KACF,MAAA;AACL,MAAA,IAAI,cAAe,CAAA,OAAA,EAA8B,oBAAA,CAAA,cAAA,CAAe,OAAO,CAAA;AACvE,MAAe,cAAA,CAAA,OAAA,GAAU,sBAAsB,MAAM,CAAA;AAAA;AAGvD,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,cAAe,CAAA,OAAA,EAA8B,oBAAA,CAAA,cAAA,CAAe,OAAO,CAAA;AAAA,KACzE;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,QAAQ,CAAC,CAAA;AAEvB,EAAO,OAAA,gBAAA;AACT;;;;"}

package/dist/hooks/useConversationMessages.esm.js

@@ -43,7 +43,7 @@ const useConversationMessages = (conversationId, userName, selectedModel, avatar
   }, [currentConversation, conversationId]);
   const { data: conversationsData = [], ...queryProps } = useFetchConversationMessages(currentConversation);
   React__default.useEffect(() => {
-    if (!Array.isArray(conversationsData) || conversationsData.length === 0)
+    if (!Array.isArray(conversationsData) || conversationsData.length === 0 && conversationId !== TEMP_CONVERSATION_ID)
       return;
     if (conversations) {
       const _conversations = {
@@ -92,7 +92,7 @@ const useConversationMessages = (conversationId, userName, selectedModel, avatar
     streamingConversations
   ]);
   const handleInputPrompt = React__default.useCallback(
-    async (prompt) => {
+    async (prompt, attachments = []) => {
       let newConversationId = "";
       const conversationTuple = [
         createUserMessage({
@@ -123,7 +123,7 @@ const useConversationMessages = (conversationId, userName, selectedModel, avatar
         };
       });
       setTimeout(() => {
-        scrollToBottomRef.current?.scrollIntoView({ behavior: "auto" });
+        scrollToBottomRef.current?.scrollToBottom();
       }, 0);
       const finalMessages = [];
       let buffer = "";
@@ -131,7 +131,8 @@ const useConversationMessages = (conversationId, userName, selectedModel, avatar
         const reader = await createMessage({
           prompt,
           selectedModel,
-          currentConversation
+          currentConversation,
+          attachments
         });
         const decoder = new TextDecoder("utf-8");
         const keepGoing = true;
@@ -182,6 +183,35 @@ const useConversationMessages = (conversationId, userName, selectedModel, avatar
                   };
                 });
               }
+              if (event === "end") {
+                const documents = data?.referenced_documents || [];
+                setConversations((prevConversations) => {
+                  const conversation = prevConversations[currentConversation] ?? [];
+                  const lastMessageIndex = conversation.length - 1;
+                  const lastMessage = conversation.length === 0 ? createBotMessage({
+                    content: "",
+                    timestamp: getTimestamp(Date.now())
+                  }) : { ...conversation[lastMessageIndex] };
+                  if (documents.length) {
+                    lastMessage.sources = {
+                      sources: documents.map(
+                        (doc) => ({
+                          title: doc.doc_title,
+                          link: doc.doc_url
+                        })
+                      )
+                    };
+                  }
+                  const updatedConversation = [
+                    ...conversation.slice(0, lastMessageIndex),
+                    lastMessage
+                  ];
+                  return {
+                    ...prevConversations,
+                    [currentConversation]: updatedConversation
+                  };
+                });
+              }
             } catch (error) {
               console.warn("Error parsing JSON:", error);
               if (typeof onComplete === "function") {