Use state for config and listen to setConfig message

pages/widget.tsx

@@ -1,10 +1,11 @@
 import { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next';
 import Head from 'next/head';
-import { useContext, useEffect } from 'react';
+import { ContextType, useContext, useEffect, useState } from 'react';
 import Widget from '../components/Widget';
 import { assertOrigin } from '../lib/config';
 import { ConfigContext, ThemeContext } from '../lib/context';
 import { decodeState } from '../lib/oauth/state';
+import { ISetConfigMessage } from '../lib/types/giscus';
 import { getOriginHost } from '../lib/utils';
 import { env } from '../lib/variables';
 import { getAppAccessToken } from '../services/github/getAppAccessToken';
@@ -70,14 +71,42 @@ export default function WidgetPage({
   description,
   reactionsEnabled,
   emitMetadata,
-  theme,
   originHost,
   error,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const resolvedOrigin = origin || (typeof location === 'undefined' ? '' : location.href);
   const { theme: resolvedTheme, setTheme } = useContext(ThemeContext);
+  const [config, setConfig] = useState<ContextType<typeof ConfigContext>>({
+    repo,
+    term,
+    number,
+    category,
+    reactionsEnabled,
+    emitMetadata,
+  });
 
-  useEffect(() => setTheme(theme), [setTheme, theme]);
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.origin !== originHost) return;
+      if (typeof event.data !== 'object' || !event.data.giscus) return;
+
+      const giscusData = event.data.giscus;
+
+      if ('setConfig' in giscusData) {
+        const { setConfig: newConfig } = giscusData as ISetConfigMessage;
+
+        if ('theme' in newConfig) {
+          setTheme(newConfig.theme);
+          delete newConfig.theme;
+        }
+
+        setConfig((prevConfig) => ({ ...prevConfig, ...newConfig }));
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [originHost, setTheme]);
 
   return (
     <>
@@ -97,9 +126,7 @@ export default function WidgetPage({
             .
           </div>
         ) : (
-          <ConfigContext.Provider
-            value={{ repo, term, number, category, reactionsEnabled, emitMetadata }}
-          >
+          <ConfigContext.Provider value={config}>
             <Widget
               origin={resolvedOrigin}
               session={session}