janhq · urmauur · Feb 9, 2024 · Feb 8, 2024 · Feb 8, 2024 · Feb 8, 2024
diff --git a/web/containers/ModalTroubleShoot/AppLogs.tsx b/web/containers/ModalTroubleShoot/AppLogs.tsx
diff --git a/web/containers/ModalTroubleShoot/DeviceSpecs.tsx b/web/containers/ModalTroubleShoot/DeviceSpecs.tsx
@@ -0,0 1,46 @@
 import React from 'react'
 
 import { Button } from '@janhq/uikit'
 
 import { CopyIcon, CheckIcon } from 'lucide-react'
 
 import { useClipboard } from '@/hooks/useClipboard'
 
 // TODO @Louis help add missing information device specs
 const DeviceSpecs = () => {
  const userAgent = window.navigator.userAgent
  const clipboard = useClipboard({ timeout: 1000 })
 
  return (
  <>
  <div className="absolute -top-11 right-2">
  <Button
  themes="outline"
  className="bg-white dark:bg-secondary/50"
  onClick={() => {
  clipboard.copy(userAgent ?? '')
  }}
  >
  <div className="flex items-center space-x-2">
  {clipboard.copied ? (
  <>
  <CheckIcon size={14} className="text-green-600" />
  <span>Copying...</span>
  </>
  ) : (
  <>
  <CopyIcon size={14} />
  <span>Copy All</span>
  </>
  )}
  </div>
  </Button>
  </div>
  <div>
  <p className="leading-relaxed">{userAgent}</p>
  </div>
  </>
  )
 }
 
 export default DeviceSpecs
diff --git a/web/containers/ModalTroubleShoot/index.tsx b/web/containers/ModalTroubleShoot/index.tsx
@@ -0,0 1,121 @@
 import { useState } from 'react'
 import ScrollToBottom from 'react-scroll-to-bottom'
 
 import { Modal, ModalContent, ModalHeader, ModalTitle } from '@janhq/uikit'
 import { motion as m } from 'framer-motion'
 import { atom, useAtom } from 'jotai'
 import { twMerge } from 'tailwind-merge'
 
 import ServerLogs from '../ServerLogs'
 
 import AppLogs from './AppLogs'
 import DeviceSpecs from './DeviceSpecs'
 
 export const modalTroubleShootingAtom = atom(false)
 const logOption = ['App Logs', 'Server Logs', 'Device Specs']
 
 const ModalTroubleShooting: React.FC = () => {
  const [modalTroubleShooting, setModalTroubleShooting] = useAtom(
  modalTroubleShootingAtom
  )
  const [isTabActive, setIsTabActivbe] = useState(0)
 
  return (
  <Modal open={modalTroubleShooting} onOpenChange={setModalTroubleShooting}>
  <ModalContent className="max-w-[60%] pb-4 pt-8">
  <ModalHeader>
  <ModalTitle>Troubleshooting Assistance</ModalTitle>
  </ModalHeader>
  <p className="-mt-2 pr-3 leading-relaxed text-muted-foreground">
  {`We're here to help! Your report is crucial for debugging and shaping
  the next version. Here’s how you can report & get further support:`}
  </p>
 
  <div className="rounded-lg border border-border p-4 shadow">
  <h2 className="font-semibold">Step 1</h2>
  <p className="mt-1 text-muted-foreground">
  Follow our&nbsp;
  <a
  href="https://jan.ai/guides/troubleshooting"
  target="_blank"
  className="text-blue-600 hover:underline dark:text-blue-300"
  >
  troubleshooting guide
  </a>
  &nbsp;for step-by-step solutions.
  </p>
  </div>
 
  <div className="block overflow-hidden rounded-lg border border-border pb-2 pt-4 shadow">
  <div className="px-4">
  <h2 className="font-semibold">Step 2</h2>
  <p className="mt-1 text-muted-foreground">
  {`If you can't find what you need in our troubleshooting guide, feel
  free reach out to us for extra help:`}
  </p>
  <ul className="mt-2 list-disc space-y-2 pl-6">
  <li>
  <p className="font-medium">
  Copy your 2-hour logs & device specifications provided below.{' '}
  </p>
  </li>
  <li>
  <p className="font-medium">
  Go to our&nbsp;
  <a
  href="https://discord.gg/AsJ8krTT3N"
  target="_blank"
  className="text-blue-600 hover:underline dark:text-blue-300"
  >
  Discord
  </a>
  &nbsp; & send it to #🆘|get-help channel for further support.
  </p>
  </li>
  </ul>
  </div>
 
  <div className="flex flex-col pt-4">
  {/* TODO @faisal replace this once we have better tabs component UI */}
  <div className="relative bg-zinc-100 px-4 py-2 dark:bg-secondary/50">
  <ul className="inline-flex space-x-2 rounded-lg bg-zinc-200 px-1 dark:bg-secondary">
  {logOption.map((name, i) => {
  return (
  <li
  className="relative cursor-pointer px-4 py-2"
  key={i}
  onClick={() => setIsTabActivbe(i)}
  >
  <span
  className={twMerge(
  'relative z-50 font-medium text-muted-foreground',
  isTabActive === i &&
  'font-bold text-foreground dark:text-black'
  )}
  >
  {name}
  </span>
  {isTabActive === i && (
  <m.div
  className="absolute left-0 top-1 h-[calc(100%-8px)] w-full rounded-md bg-background dark:bg-white"
  layoutId="log-state-active"
  />
  )}
  </li>
  )
  })}
  </ul>
  </div>
  <ScrollToBottom className={twMerge('relative h-[140px] px-4 py-2')}>
  {isTabActive === 0 && <AppLogs />}
  {isTabActive === 1 && <ServerLogs limit={50} withCopy />}
  {isTabActive === 2 && <DeviceSpecs />}
  </ScrollToBottom>
  </div>
  </div>
  </ModalContent>
  </Modal>
  )
 }
 
 export default ModalTroubleShooting
diff --git a/web/containers/Providers/EventHandler.tsx b/web/containers/Providers/EventHandler.tsx
@@ -95,12 95,12 @@ export default function EventHandler({ children }: { children: ReactNode }) {
  (res: any) => {
  const errorMessage = `${res.error}`
  console.error('Failed to load model: ' errorMessage)
- setLoadModelError(errorMessage)
  setStateModel(() => ({
  state: 'start',
  loading: false,
  model: res.modelId,
  }))
  setLoadModelError(errorMessage)
  setQueuedMessage(false)
  },
  [setStateModel, setQueuedMessage, setLoadModelError]