chore: updated strucutre of main page

frontend/src/router/DocsQA.tsx

@@ -6,7 +6,7 @@ import ScreenFallbackLoader from '@/components/base/molecules/ScreenFallbackLoad
 import DataHub from '@/screens/dashboard/docsqa/DataSources'
 import NavBar from '@/screens/dashboard/docsqa/Navbar'
 import Applications from '@/screens/dashboard/docsqa/Applications'
-const DocsQA = lazy(() => import('@/screens/dashboard/docsqa'))
+const DocsQA = lazy(() => import('@/screens/dashboard/docsqa/main'))
 const DocsQAChatbot = lazy(() => import('@/screens/dashboard/docsqa/Chatbot'))
 const DocsQASettings = lazy(() => import('@/screens/dashboard/docsqa/settings'))
 

frontend/src/screens/dashboard/docsqa/main/DocsQA.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+
+import Spinner from '@/components/base/atoms/Spinner/Spinner'
+import ApplicationModal from './components/ApplicationModal'
+import NoCollections from '../NoCollections'
+import { useDocsQAContext } from './context'
+import Left from './components/Left'
+import Right from './components/Right'
+
+const DocsQA = () => {
+  const {
+    selectedQueryModel,
+    setSelectedQueryModel,
+    selectedCollection,
+    setSelectedCollection,
+    selectedQueryController,
+    setSelectedQueryController,
+    selectedRetriever,
+    setSelectedRetriever,
+    prompt,
+    setPrompt,
+    isRunningPrompt,
+    setIsRunningPrompt,
+    answer,
+    setAnswer,
+    sourceDocs,
+    setSourceDocs,
+    errorMessage,
+    setErrorMessage,
+    modelConfig,
+    setModelConfig,
+    retrieverConfig,
+    setRetrieverConfig,
+    promptTemplate,
+    setPromptTemplate,
+    isInternetSearchEnabled,
+    setIsInternetSearchEnabled,
+    isCreateApplicationModalOpen,
+    setIsCreateApplicationModalOpen,
+    collections,
+    isCollectionsLoading,
+    allEnabledModels,
+    allQueryControllers,
+    allRetrieverOptions,
+    handlePromptSubmit,
+    resetQA,
+    isCreateApplicationLoading,
+    createChatApplication,
+  } = useDocsQAContext()
+
+  return (
+    <>
+      <ApplicationModal />
+      <div className="flex gap-5 h-[calc(100vh-6.5rem)] w-full">
+        {isCollectionsLoading ? (
+          <div className="h-full w-full flex items-center">
+            <Spinner center big />
+          </div>
+        ) : selectedCollection ? (
+          <>
+            <Left />
+            <Right />
+          </>
+        ) : (
+          <NoCollections fullWidth />
+        )}
+      </div>
+    </>
+  )
+}
+
+export default DocsQA

frontend/src/screens/dashboard/docsqa/main/components/Answer.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import SourceDocsPreview from '../../DocsQA/SourceDocsPreview'
+import IconProvider from '@/components/assets/IconProvider'
+import Markdown from 'react-markdown'
+import { useDocsQAContext } from '../context'
+
+const Answer = () => {
+  const { answer, sourceDocs } = useDocsQAContext()
+
+  return (
+    <div className="overflow-y-auto flex flex-col gap-4 mt-7 h-[calc(100%-70px)]">
+      <div className="max-h-[60%] h-full overflow-y-auto flex gap-4">
+        <div className="bg-indigo-400 w-6 h-6 rounded-full flex items-center justify-center mt-0.5">
+          <IconProvider icon="message" className="text-white" />
+        </div>
+        <div className="w-full font-inter text-base">
+          <div className="font-bold text-lg">Answer:</div>
+          <Markdown>{answer}</Markdown>
+        </div>
+      </div>
+      {sourceDocs && <SourceDocsPreview sourceDocs={sourceDocs} />}
+    </div>
+  )
+}
+
+export default Answer

frontend/src/screens/dashboard/docsqa/main/components/ApplicationModal.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react'
+
+import Modal from '@/components/base/atoms/Modal'
+import Input from '@/components/base/atoms/Input'
+import Button from '@/components/base/atoms/Button'
+import { LightTooltip } from '@/components/base/atoms/Tooltip'
+import { useDocsQAContext } from '../context'
+
+const ApplicationModal = () => {
+  const {
+    createChatApplication,
+    isCreateApplicationLoading,
+    isCreateApplicationModalOpen,
+    setIsCreateApplicationModalOpen,
+  } = useDocsQAContext()
+
+  const [applicationName, setApplicationName] = useState('')
+  const [questions, setQuestions] = useState<string[]>([])
+
+  const pattern = /^[a-z][a-z0-9-]*$/
+  const isValidApplicationName = pattern.test(applicationName)
+
+  return (
+    isCreateApplicationModalOpen && (
+      <Modal
+        open={isCreateApplicationModalOpen}
+        onClose={() => {
+          setApplicationName('')
+          setQuestions([])
+          setIsCreateApplicationModalOpen(false)
+        }}
+      >
+        <div className="modal-box">
+          <div className="text-center font-medium text-xl mb-2">
+            Create Application
+          </div>
+          <div>
+            <div className="text-sm">Enter the name of the application</div>
+            <Input
+              value={applicationName}
+              onChange={(e) => setApplicationName(e.target.value)}
+              className="py-1 input-sm mt-1"
+              placeholder="E.g. query-bot"
+            />
+            {applicationName && !isValidApplicationName ? (
+              <div className="text-sm text-error mt-1">
+                Application name should start with a lowercase letter and can
+                only contain lowercase letters, numbers and hyphens
+              </div>
+            ) : applicationName ? (
+              <div className="text-sm mt-1">
+                The application name will be generated as{' '}
+                <span className="font-medium">"{applicationName}-rag-app"</span>
+              </div>
+            ) : (
+              <></>
+            )}
+            <div className="mt-2 text-sm">Questions (Optional)</div>
+            {questions.map((question: any, index: any) => (
+              <div className="flex items-center gap-2 mt-2 w-full">
+                <div className="flex-1">
+                  <Input
+                    key={index}
+                    value={question}
+                    onChange={(e) => {
+                      const updatedQuestions = [...questions]
+                      updatedQuestions[index] = e.target.value
+                      setQuestions(updatedQuestions)
+                    }}
+                    className="py-1 input-sm w-full"
+                    placeholder={`Question ${index + 1}`}
+                    maxLength={100}
+                  />
+                </div>
+                <Button
+                  icon="trash-alt"
+                  className="btn-sm hover:bg-red-600 hover:border-white hover:text-white"
+                  onClick={() => {
+                    setQuestions(questions.filter((_, i) => i !== index))
+                  }}
+                />
+              </div>
+            ))}
+            <LightTooltip
+              title={
+                questions.length === 4 ? 'Maximum 4 questions are allowed' : ''
+              }
+              size="fit"
+            >
+              <div className="w-fit">
+                <Button
+                  text="Add Question"
+                  white
+                  disabled={questions.length == 4}
+                  className="text-sm font-medium text-gray-1000 hover:bg-white mt-2"
+                  onClick={() => {
+                    if (questions.length < 4) {
+                      setQuestions([...questions, ''])
+                    }
+                  }}
+                />
+              </div>
+            </LightTooltip>
+          </div>
+          <div className="flex justify-end w-full mt-4 gap-2">
+            <Button
+              text="Cancel"
+              className="btn-sm"
+              onClick={() => {
+                setApplicationName('')
+                setQuestions([])
+                setIsCreateApplicationModalOpen(false)
+              }}
+            />
+            <Button
+              text="Create"
+              className="btn-sm btn-neutral"
+              loading={isCreateApplicationLoading}
+              onClick={() =>
+                createChatApplication(
+                  applicationName,
+                  questions,
+                  setApplicationName,
+                )
+              }
+            />
+          </div>
+        </div>
+      </Modal>
+    )
+  )
+}
+
+export default ApplicationModal

frontend/src/screens/dashboard/docsqa/main/components/ConfigSelector.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+
+import { MenuItem, Select } from '@mui/material'
+
+interface ConfigProps {
+  title: string
+  placeholder: string
+  initialValue: string
+  data: any[] | undefined
+  handleOnChange: (e: any) => void
+  renderItem?: (e: any) => React.ReactNode
+  className?: string
+}
+
+const ConfigSelector = (props: ConfigProps) => {
+  const {
+    title,
+    placeholder,
+    initialValue,
+    data,
+    className,
+    handleOnChange,
+    renderItem,
+  } = props
+  return (
+    <div className={`flex justify-between items-center ${className}`}>
+      <div className="text-sm">{title}:</div>
+      <Select
+        value={initialValue}
+        onChange={(e) => handleOnChange(e)}
+        placeholder={placeholder + '...'}
+        sx={{
+          background: 'white',
+          height: '2rem',
+          width: '13.1875rem',
+          border: '1px solid #CEE0F8 !important',
+          outline: 'none !important',
+          '& fieldset': {
+            border: 'none !important',
+          },
+        }}
+      >
+        {data?.map((item: any) =>
+          renderItem ? (
+            renderItem(item)
+          ) : (
+            <MenuItem value={item} key={item}>
+              {item}
+            </MenuItem>
+          ),
+        )}
+      </Select>
+    </div>
+  )
+}
+
+export default ConfigSelector

frontend/src/screens/dashboard/docsqa/main/components/ErrorAnswer.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import IconProvider from '@/components/assets/IconProvider'
+
+const ErrorAnswer = () => {
+  return (
+    <div className="overflow-y-auto flex gap-4 mt-7">
+      <div className="bg-error w-6 h-6 rounded-full flex items-center justify-center mt-0.5">
+        <IconProvider icon="message" className="text-white" />
+      </div>
+      <div className="w-full font-inter text-base text-error">
+        <div className="font-bold text-lg">Error</div>
+        We failed to get answer for your query, please try again by resending
+        query or try again in some time.
+      </div>
+    </div>
+  )
+}
+
+export default ErrorAnswer