ignore ctx is null early return

src/components/ImageGenDrawer.tsx

@@ -28,7 +28,6 @@ interface ImageResponse {
 }
 export function ImageGenDrawer({ disableFactor }: Props) {
   const ctx = useContext(AppContext);
-  if (ctx === null) return <></>;
 
   const [showGenImage, setShowGenImage] = useState(false);
   const [imageGenPrompt, setImageGenPrompt] = useState("");

src/components/ImageUploadDrawer.tsx

@@ -24,7 +24,6 @@ interface Props {
 }
 export function ImageUploadDrawer({ setImages, images, disableFactor }: Props) {
   const ctx = useContext(AppContext);
-  if (ctx === null) return <></>;
   const [showAddImage, setShowAddImage] = useState(false);
   const [enableHighResolution, setEnableHighResolution] = useState(true);
   useState("b64_json");

src/components/ListAPI.tsx

@@ -118,7 +118,6 @@ function APIsDropdownList({
 
 function ToolsDropdownList() {
   const ctx = useContext(AppContext);
-  if (!ctx) return <div>error</div>;
   const { toast } = useToast();
   const [open, setOpen] = React.useState(false);
 
@@ -189,7 +188,6 @@ function ToolsDropdownList() {
 
 function ChatTemplateDropdownList() {
   const ctx = useContext(AppContext);
-  if (!ctx) return <div>error</div>;
 
   const { chatStore, setChatStore, templates } = ctx;
 
@@ -237,7 +235,6 @@ function ChatTemplateDropdownList() {
 
 const APIListMenu: React.FC = () => {
   const ctx = useContext(AppContext);
-  if (!ctx) return <div>error</div>;
   return (
     <div className="flex flex-col m-2 gap-2 w-full">
       {ctx.templateTools.length > 0 && <ToolsDropdownList />}

src/components/MessageBubble.tsx

@@ -172,7 +172,6 @@ export function TTSPlay(props: TTSPlayProps) {
 function TTSButton(props: TTSProps) {
   const [generating, setGenerating] = useState(false);
   const ctx = useContext(AppContext);
-  if (!ctx) return <div>error</div>;
 
   return (
     <Button
@@ -237,7 +236,6 @@ function TTSButton(props: TTSProps) {
 
 export default function Message(props: { messageIndex: number }) {
   const ctx = useContext(AppContext);
-  if (ctx === null) return <></>;
   const { messageIndex } = props;
   const { chatStore, setChatStore } = ctx;
 
@@ -303,7 +301,8 @@ export default function Message(props: { messageIndex: number }) {
             <Markdown>{getMessageText(chat)}</Markdown>
           ) : (
             <div className="message-content">
-              {chat.content &&
+              {ctx &&
+                chat.content &&
                 (chat.logprobs && renderColor
                   ? chat.logprobs.content
                       .filter((c) => c.token)

src/components/Search.tsx

@@ -34,7 +34,6 @@ interface ChatStoreSearchResult {
 
 export default function Search() {
   const ctx = useContext(AppContext);
-  if (ctx === null) return <></>;
   const { setSelectedChatIndex, db } = ctx;
 
   const [searchResult, setSearchResult] = useState<ChatStoreSearchResult[]>([]);

src/components/Settings.tsx

@@ -97,7 +97,6 @@ const Help = (props: { children: any; help: string; field: string }) => {
 
 const SelectModel = (props: { help: string }) => {
   const ctx = useContext(AppContext);
-  if (ctx === null) return <></>;
 
   let shouldIUseCustomModel: boolean = true;
   for (const model in models) {
@@ -184,7 +183,6 @@ const LongInput = (props: {
   help: string;
 }) => {
   const ctx = useContext(AppContext);
-  if (ctx === null) return <></>;
   return (
     <div>
       <Label htmlFor="name" className="text-right">
@@ -233,7 +231,6 @@ const InputField = (props: {
   help: string;
 }) => {
   const ctx = useContext(AppContext);
-  if (ctx === null) return <></>;
   const [hideInput, setHideInput] = useState(true);
   return (
     <>
@@ -289,7 +286,6 @@ const Slicer = (props: {
   max: number;
 }) => {
   const ctx = useContext(AppContext);
-  if (ctx === null) return <></>;
   const enable_filed_name: "temperature_enabled" | "top_p_enabled" =
     `${props.field}_enabled` as any;
 
@@ -380,7 +376,6 @@ const Number = (props: {
   help: string;
 }) => {
   const ctx = useContext(AppContext);
-  if (ctx === null) return <></>;
   return (
     <div className="space-y-2">
       <Label className="flex items-center gap-2">
@@ -436,7 +431,6 @@ const Choice = (props: {
   help: string;
 }) => {
   const ctx = useContext(AppContext);
-  if (ctx === null) return <></>;
 
   return (
     <div className="flex items-center space-x-2">
@@ -627,7 +621,6 @@ const ToolsShowBlock = (props: {
 
 export default (props: {}) => {
   const ctx = useContext(AppContext);
-  if (ctx === null) return <></>;
 
   let link =
     location.protocol +

src/components/Templates.tsx

@@ -6,7 +6,6 @@ import { useContext } from "react";
 
 const Templates = () => {
   const ctx = useContext(AppContext);
-  if (ctx === null) return <></>;
   const { templates, chatStore, setChatStore, setTemplates } = ctx;
 
   return (

src/components/VersionHint.tsx

@@ -5,7 +5,6 @@ import { AppContext } from "@/pages/App";
 
 const VersionHint = () => {
   const ctx = useContext(AppContext);
-  if (!ctx) return <div>error</div>;
 
   const { chatStore } = ctx;
   return (

src/components/WhisperButton.tsx

@@ -10,7 +10,6 @@ const WhisperButton = (props: {
   setInputMsg: Dispatch<string>;
 }) => {
   const ctx = useContext(AppContext);
-  if (!ctx) return <div>error</div>;
   const { chatStore } = ctx;
 
   const { inputMsg, setInputMsg } = props;

src/components/editMessage.tsx

@@ -22,7 +22,6 @@ interface EditMessageProps {
 }
 export function EditMessage(props: EditMessageProps) {
   const ctx = useContext(AppContext);
-  if (!ctx) return <div>error</div>;
 
   const { showEdit, setShowEdit, chat } = props;
 

src/components/editMessageDetail.tsx

@@ -23,7 +23,6 @@ interface Props {
 }
 export function EditMessageDetail({ chat, setShowEdit }: Props) {
   const ctx = useContext(AppContext);
-  if (!ctx) return <div>error</div>;
 
   const { chatStore, setChatStore } = ctx;
 

src/components/editMessageString.tsx

@@ -13,7 +13,6 @@ interface Props {
 }
 export function EditMessageString({ chat, setShowEdit }: Props) {
   const ctx = useContext(AppContext);
-  if (!ctx) return <div>error</div>;
 
   const { chatStore, setChatStore } = ctx;
 

src/pages/App.tsx

@@ -49,7 +49,7 @@ interface AppContextType {
   setTemplateTools: (t: TemplateTools[]) => void;
 }
 
-export const AppContext = createContext<AppContextType | null>(null);
+export const AppContext = createContext<AppContextType>(null as any);
 
 import {
   Sidebar,

src/pages/Chatbox.tsx

@@ -45,7 +45,6 @@ import { ImageGenDrawer } from "@/components/ImageGenDrawer";
 
 export default function ChatBOX() {
   const ctx = useContext(AppContext);
-  if (ctx === null) return <></>;
   const {
     db,
     chatStore,
@@ -54,7 +53,6 @@ export default function ChatBOX() {
     setSelectedChatIndex,
   } = ctx;
   // prevent error
-  if (chatStore === undefined) return <div></div>;
   const [inputMsg, setInputMsg] = useState("");
   const [images, setImages] = useState<MessageDetail[]>([]);
   const [showAddImage, setShowAddImage] = useState(false);