diff --git a/src/components/ImageGenDrawer.tsx b/src/components/ImageGenDrawer.tsx
index c03f2f5..739a3d5 100644
--- a/src/components/ImageGenDrawer.tsx
+++ b/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("");
diff --git a/src/components/ImageUploadDrawer.tsx b/src/components/ImageUploadDrawer.tsx
index 9c6ed7d..79dd3bc 100644
--- a/src/components/ImageUploadDrawer.tsx
+++ b/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");
diff --git a/src/components/ListAPI.tsx b/src/components/ListAPI.tsx
index d32a62a..5ae9600 100644
--- a/src/components/ListAPI.tsx
+++ b/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 />}
diff --git a/src/components/MessageBubble.tsx b/src/components/MessageBubble.tsx
index 2cc15c6..186385f 100644
--- a/src/components/MessageBubble.tsx
+++ b/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)
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index bbe0b3e..bf376d4 100644
--- a/src/components/Search.tsx
+++ b/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[]>([]);
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index c4bff53..e2a9bb5 100644
--- a/src/components/Settings.tsx
+++ b/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 +
diff --git a/src/components/Templates.tsx b/src/components/Templates.tsx
index a59809c..07856b5 100644
--- a/src/components/Templates.tsx
+++ b/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 (
diff --git a/src/components/VersionHint.tsx b/src/components/VersionHint.tsx
index 3844e59..068f33f 100644
--- a/src/components/VersionHint.tsx
+++ b/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 (
diff --git a/src/components/WhisperButton.tsx b/src/components/WhisperButton.tsx
index b0165ab..a50de8b 100644
--- a/src/components/WhisperButton.tsx
+++ b/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;
diff --git a/src/components/editMessage.tsx b/src/components/editMessage.tsx
index 632a513..3c7dc1d 100644
--- a/src/components/editMessage.tsx
+++ b/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;
 
diff --git a/src/components/editMessageDetail.tsx b/src/components/editMessageDetail.tsx
index 9dddb33..63cf9f4 100644
--- a/src/components/editMessageDetail.tsx
+++ b/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;
 
diff --git a/src/components/editMessageString.tsx b/src/components/editMessageString.tsx
index 6487ebc..fe3cf07 100644
--- a/src/components/editMessageString.tsx
+++ b/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;
 
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 51e0cfc..2c484a2 100644
--- a/src/pages/App.tsx
+++ b/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,
diff --git a/src/pages/Chatbox.tsx b/src/pages/Chatbox.tsx
index 3315057..e37e5ab 100644
--- a/src/pages/Chatbox.tsx
+++ b/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);