Adjust AI chat styles (#356)

public/styles/inkeep.css

@@ -0,0 +1,37 @@
+#inkeep-widget-root {
+  --ai-chat-radius: 0.25rem;
+  --ai-chat-light-background: #f9fafb;
+}
+
+.ikp-ai-chat__header-toolbar {
+  display: none;
+}
+
+.ikp-ai-chat__scrollable-page-content {
+  border-top-left-radius: var(--ai-chat-radius);
+  border-top-right-radius: var(--ai-chat-radius);
+}
+
+.ikp-ai-chat-footer__content-wrapper {
+  border-bottom-left-radius: var(--ai-chat-radius);
+  border-bottom-right-radius: var(--ai-chat-radius);
+}
+
+[data-theme="light"] .ikp-ai-chat__scrollable-page-content {
+  background: var(--ai-chat-light-background);
+}
+
+[data-theme="light"] .ikp-ai-chat-footer__content-wrapper {
+  background: var(--ai-chat-light-background);
+}
+
+[data-theme="light"] .ikp-ai-chat__message-box {
+  box-shadow: none;
+  border: 1px solid #e0e0e0;
+  background: #fff;
+}
+
+/* Remove weird blur effect on footer */
+.ikp-ai-chat-footer__content-wrapper::before {
+  display: none;
+}

src/app/ask/embedded.tsx

@@ -1,6 +1,7 @@
 "use client";
-import { InkeepEmbeddedChatProps } from "@inkeep/widgets";
 import dynamic from "next/dynamic";
+import { useTheme } from "next-themes";
+
 import { aiChatSettings, baseSettings } from "../../lib/search";
 
 const EmbeddedChat = dynamic(
@@ -12,12 +13,20 @@ const EmbeddedChat = dynamic(
 );
 
 function InkeepEmbeddedChat() {
-  const embeddedChatProps: InkeepEmbeddedChatProps = {
-    baseSettings,
-    aiChatSettings,
-  };
+  const { resolvedTheme } = useTheme();
 
-  return <EmbeddedChat {...embeddedChatProps} />;
+  return (
+    <EmbeddedChat
+      stylesheetUrls={["/docs/styles/inkeep.css"]}
+      baseSettings={{
+        ...baseSettings,
+        colorMode: {
+          forcedColorMode: resolvedTheme,
+        },
+      }}
+      aiChatSettings={aiChatSettings}
+    />
+  );
 }
 
 export default InkeepEmbeddedChat;

src/lib/search.ts

@@ -13,6 +13,12 @@ const baseSettings: InkeepWidgetBaseSettings = {
   organizationDisplayName: "Zuplo",
   theme: {
     components: {
+      AIChatPageWrapper: {
+        defaultProps: {
+          size: "shrink-vertically",
+          variant: "no-shadow",
+        },
+      },
       SearchBarTrigger: {
         defaultProps: {
           size: "expand",