Merge branch 'main' into kapetr/refactor-app-context-to-modals

Signed-off-by: Petr Kadlec <[email protected]>

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## <small>0.0.22 (2025-01-08)</small>
+
+* chore(feature-flags): make feature flags configurable at runtime (#172) ([5df12c3](https://github.com/i-am-bee/bee-ui/commit/5df12c3)), closes [#172](https://github.com/i-am-bee/bee-ui/issues/172)
+* fix(auth): token revalidation and session update (#166) ([d794c1f](https://github.com/i-am-bee/bee-ui/commit/d794c1f)), closes [#166](https://github.com/i-am-bee/bee-ui/issues/166)
+* fix(chat): cancel run (#168) ([f8b1201](https://github.com/i-am-bee/bee-ui/commit/f8b1201)), closes [#168](https://github.com/i-am-bee/bee-ui/issues/168)
+* fix(chat): disable submit on pending file upload (#173) ([5e308b3](https://github.com/i-am-bee/bee-ui/commit/5e308b3)), closes [#173](https://github.com/i-am-bee/bee-ui/issues/173)
+* feat: post-launch qa updates 2 ([a9afce3](https://github.com/i-am-bee/bee-ui/commit/a9afce3))
+* feat(observe): add raw prompt for streamlit agent (#161) ([586e66f](https://github.com/i-am-bee/bee-ui/commit/586e66f)), closes [#161](https://github.com/i-am-bee/bee-ui/issues/161)
+
 ## <small>0.0.21 (2024-12-19)</small>
 
 * fix: assistant builder form edit bug (#162) ([623863b](https://github.com/i-am-bee/bee-ui/commit/623863b)), closes [#162](https://github.com/i-am-bee/bee-ui/issues/162)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bee-ui",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "license": "Apache-2.0",
   "author": "IBM Corp.",
   "scripts": {

src/modules/apps/builder/AppBuilder.tsx

@@ -233,7 +233,7 @@ function AppBuilderContent() {
     totalCount,
   ]);
 
-  const handleReportError = useCallback(
+  const handleFixError = useCallback(
     async (errorText: string) => {
       await sendMessage(
         `I have encountered the following error:\n\n\`\`\`error\n${errorText}\n\`\`\`\n\nFix this error please.`,
@@ -349,7 +349,7 @@ function AppBuilderContent() {
             <TabPanel key={TabsKeys.Preview}>
               <ArtifactSharedIframe
                 sourceCode={code}
-                onReportError={handleReportError}
+                onFixError={handleFixError}
               />
             </TabPanel>
             <TabPanel key={TabsKeys.SourceCode}>

src/modules/apps/builder/ArtifactSharedIframe.tsx

@@ -18,7 +18,7 @@
 import { createChatCompletion, modulesToPackages } from '@/app/api/apps';
 import { ChatCompletionCreateBody } from '@/app/api/apps/types';
 import { ApiError } from '@/app/api/errors';
-import { Theme, useTheme } from '@/layout/providers/ThemeProvider';
+import { useTheme } from '@/layout/providers/ThemeProvider';
 import { USERCONTENT_SITE_URL } from '@/utils/constants';
 import { removeTrailingSlash } from '@/utils/helpers';
 import { Loading } from '@carbon/react';
@@ -29,7 +29,7 @@ import { useAppContext } from '@/layout/providers/AppProvider';
 
 interface Props {
   sourceCode: string | null;
-  onReportError?: (errorText: string) => void;
+  onFixError?: (errorText: string) => void;
 }
 
 function getErrorMessage(error: unknown) {
@@ -42,39 +42,38 @@ function getErrorMessage(error: unknown) {
   return 'Unknown error when calling LLM function.';
 }
 
-export function ArtifactSharedIframe({ sourceCode, onReportError }: Props) {
+export function ArtifactSharedIframe({ sourceCode, onFixError }: Props) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [state, setState] = useState<State>(State.LOADING);
   const { appliedTheme: theme } = useTheme();
   const { project, organization } = useAppContext();
+  const [iframeLoadCount, setIframeLoadCount] = useState<number>(0);
+
+  const postMessage = useCallback(
+    (message: PostMessage) => {
+      if (iframeLoadCount === 0) return;
+      iframeRef.current?.contentWindow?.postMessage(
+        message,
+        USERCONTENT_SITE_URL,
+      );
+    },
+    [iframeLoadCount],
+  );
 
-  const postMessage = (message: PostMessage) => {
-    iframeRef.current?.contentWindow?.postMessage(
-      message,
-      USERCONTENT_SITE_URL,
-    );
-  };
-
-  const updateTheme = useCallback((theme: Theme) => {
-    postMessage({ type: PostMessageType.UPDATE_THEME, theme });
-  }, []);
-
-  const updateCode = useCallback(
-    (code: string | null) => {
-      if (!code) {
-        return;
-      }
-
-      postMessage({
-        type: PostMessageType.UPDATE_CODE,
+  useEffect(() => {
+    postMessage({
+      type: PostMessageType.UPDATE_STATE,
+      stateChange: {
+        code: sourceCode ?? undefined,
         config: {
-          can_fix_error: Boolean(onReportError),
+          canFixError: Boolean(onFixError),
         },
-        code,
-      });
-    },
-    [onReportError],
-  );
+        theme: theme ?? 'system',
+        fullscreen: false,
+        ancestorOrigin: window.location.origin,
+      },
+    });
+  }, [sourceCode, onFixError, theme, postMessage]);
 
   const handleMessage = useCallback(
     async (event: MessageEvent<StliteMessage>) => {
@@ -84,15 +83,19 @@ export function ArtifactSharedIframe({ sourceCode, onReportError }: Props) {
         return;
       }
 
-      if (
-        data.type === RecieveMessageType.SCRIPT_RUN_STATE_CHANGED &&
-        data.scriptRunState === ScriptRunState.RUNNING
-      ) {
+      if (data.type === RecieveMessageType.READY) {
         setState(State.READY);
         return;
       }
 
       if (data.type === RecieveMessageType.REQUEST) {
+        const respond = (payload: unknown = undefined) =>
+          postMessage({
+            type: PostMessageType.RESPONSE,
+            request_id: data.request_id,
+            payload,
+          });
+
         try {
           switch (data.request_type) {
             case 'modules_to_packages':
@@ -101,12 +104,9 @@ export function ArtifactSharedIframe({ sourceCode, onReportError }: Props) {
                 project.id,
                 data.payload.modules,
               );
-              postMessage({
-                type: PostMessageType.RESPONSE,
-                request_id: data.request_id,
-                payload: packagesResponse,
-              });
+              respond(packagesResponse);
               break;
+
             case 'chat_completion':
               const response = await createChatCompletion(
                 organization.id,
@@ -115,49 +115,23 @@ export function ArtifactSharedIframe({ sourceCode, onReportError }: Props) {
               );
               const message = response?.choices[0]?.message?.content;
               if (!message) throw new Error(); // missing completion
-              postMessage({
-                type: PostMessageType.RESPONSE,
-                request_id: data.request_id,
-                payload: { message },
-              });
+              respond({ message });
+              break;
+
+            case 'fix_error':
+              onFixError?.(data.payload.errorText);
+              respond();
               break;
           }
         } catch (err) {
-          postMessage({
-            type: PostMessageType.RESPONSE,
-            request_id: data.request_id,
-            payload: { error: getErrorMessage(err) },
-          });
+          respond({ error: getErrorMessage(err) });
         }
         return;
       }
-
-      if (data.type === RecieveMessageType.REPORT_ERROR) {
-        onReportError?.(data.errorText);
-        return;
-      }
     },
-    [project, organization, onReportError],
+    [project, organization, onFixError, postMessage],
   );
 
-  const handleIframeLoad = useCallback(() => {
-    if (theme) {
-      updateTheme(theme);
-    }
-  }, [theme, updateTheme]);
-
-  useEffect(() => {
-    if (theme) {
-      updateTheme(theme);
-    }
-  }, [theme, updateTheme]);
-
-  useEffect(() => {
-    if (state === State.READY) {
-      updateCode(sourceCode);
-    }
-  }, [state, theme, sourceCode, updateCode]);
-
   useEffect(() => {
     window.addEventListener('message', handleMessage);
 
@@ -180,31 +154,32 @@ export function ArtifactSharedIframe({ sourceCode, onReportError }: Props) {
           'allow-popups-to-escape-sandbox',
         ].join(' ')}
         className={classes.app}
-        onLoad={handleIframeLoad}
+        onLoad={() => setIframeLoadCount((i) => i + 1)}
       />
 
       {!sourceCode ? (
         <div className={classes.placeholder}>
           <AppPlaceholder />
         </div>
       ) : (
-        state === State.LOADING && sourceCode && <Loading />
+        state === State.LOADING && <Loading />
       )}
     </div>
   );
 }
 
 type PostMessage =
   | {
-      type: PostMessageType.UPDATE_CODE;
-      code: string;
-      config: {
-        can_fix_error?: boolean;
-      };
-    }
-  | {
-      type: PostMessageType.UPDATE_THEME;
-      theme: Theme;
+      type: PostMessageType.UPDATE_STATE;
+      stateChange: Partial<{
+        fullscreen: boolean;
+        theme: 'light' | 'dark' | 'system';
+        code: string;
+        config: {
+          canFixError: boolean;
+        };
+        ancestorOrigin: string;
+      }>;
     }
   | {
       type: PostMessageType.RESPONSE;
@@ -213,15 +188,8 @@ type PostMessage =
     };
 
 enum PostMessageType {
-  UPDATE_CODE = 'bee:updateCode',
-  UPDATE_THEME = 'bee:updateTheme',
   RESPONSE = 'bee:response',
-}
-
-enum ScriptRunState {
-  INITIAL = 'initial',
-  NOT_RUNNING = 'notRunning',
-  RUNNING = 'running',
+  UPDATE_STATE = 'bee:updateState',
 }
 
 enum State {
@@ -230,15 +198,13 @@ enum State {
 }
 
 enum RecieveMessageType {
-  SCRIPT_RUN_STATE_CHANGED = 'SCRIPT_RUN_STATE_CHANGED',
+  READY = 'bee:ready',
   REQUEST = 'bee:request',
-  REPORT_ERROR = 'bee:reportError',
 }
 
 export type StliteMessage =
   | {
-      type: RecieveMessageType.SCRIPT_RUN_STATE_CHANGED;
-      scriptRunState: ScriptRunState;
+      type: RecieveMessageType.READY;
     }
   | {
       type: RecieveMessageType.REQUEST;
@@ -253,6 +219,8 @@ export type StliteMessage =
       payload: ChatCompletionCreateBody;
     }
   | {
-      type: RecieveMessageType.REPORT_ERROR;
-      errorText: string;
+      type: RecieveMessageType.REQUEST;
+      request_type: 'fix_error';
+      request_id: string;
+      payload: { errorText: string };
     };