feat: add "Show app preview" button and hide dark mode video on mobile (

#153) Signed-off-by: Petr Bulánek <[email protected]>
i-am-bee · Dec 17, 2024 · cd6d74a · cd6d74a
1 parent 394a189
commit cd6d74a
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 10 deletions.
diff --git a/src/modules/apps/builder/AppBuilder.tsx b/src/modules/apps/builder/AppBuilder.tsx
@@ -32,6 +32,7 @@ import {
   MessageWithFiles,
 } from '@/modules/chat/types';
 import { useLayoutActions } from '@/store/layout';
+import { isNotNull } from '@/utils/helpers';
 import {
   Button,
   IconButton,
@@ -53,12 +54,12 @@ import { AppIcon } from '../AppIcon';
 import { useArtifactsCount } from '../hooks/useArtifactsCount';
 import { SaveAppModal } from '../manage/SaveAppModal';
 import { ShareAppModal } from '../ShareAppModal';
+import { ArtifactMetadata } from '../types';
 import { extractCodeFromMessageContent } from '../utils';
 import classes from './AppBuilder.module.scss';
 import { useAppBuilder, useAppBuilderApi } from './AppBuilderProvider';
 import { ArtifactSharedIframe } from './ArtifactSharedIframe';
 import { SourceCodeEditor } from './SourceCodeEditor';
-import { ArtifactMetadata } from '../types';
 
 interface Props {
   thread?: Thread;
@@ -254,7 +255,11 @@ function AppBuilderContent() {
       })}
     >
       <section className={classes.chat}>
-        <ConversationView />
+        <ConversationView
+          onShowMobilePreviewButtonClick={
+            isNotNull(code) ? () => setMobilePreviewOpen(true) : undefined
+          }
+        />
       </section>
       <section
         className={clsx(classes.appPane, { [classes.empty]: code == null })}

diff --git a/src/modules/auth/SignIn.module.scss b/src/modules/auth/SignIn.module.scss
@@ -31,9 +31,10 @@
 
 // We want to match IBMid login page layout
 .loginGrid {
+  min-block-size: 100%;
   inline-size: 100%;
   max-inline-size: 99rem;
-  padding-inline: $grid-gutter;
+  padding-inline: $grid-margin;
   display: grid;
   align-items: stretch;
   column-gap: $spacing-08;
@@ -178,8 +179,8 @@
 }
 
 .footer {
+  @include type-style(label-01);
   margin-block-start: $spacing-08;
-  font-size: small;
   color: $text-secondary;
 
   > a {
@@ -190,6 +191,15 @@
   }
 }
 
+@include breakpoint-down(lg) {
+  .video {
+    :global(.#{$prefix}--g90) & {
+      // TODO: Temporarily hide video due to a bug in mobile Safari
+      display: none;
+    }
+  }
+}
+
 @include breakpoint-down(md) {
   .loginGrid {
     row-gap: $spacing-12;
@@ -205,6 +215,7 @@
     aspect-ratio: 1 / 1;
     grid-row-start: 1;
     margin-inline: auto;
+    min-inline-size: 0;
   }
 }
 

diff --git a/src/modules/chat/ConversationView.module.scss b/src/modules/chat/ConversationView.module.scss
@@ -42,6 +42,17 @@
   padding-block-start: $spacing-06;
 }
 
+.previewButton {
+  padding: $spacing-03 $grid-margin;
+  display: flex;
+  justify-content: center;
+  :global(.#{$prefix}--btn) {
+    align-items: center;
+    column-gap: $spacing-03;
+    padding-inline: rem(11px);
+  }
+}
+
 .bottom {
   position: relative;
 }
@@ -83,6 +94,18 @@
   margin-block-start: $spacing-05;
 }
 
+@include breakpoint-down(md) {
+  .toBottomButton {
+    margin-block-start: $spacing-04;
+  }
+}
+
+@include breakpoint-up(md) {
+  .previewButton {
+    display: none;
+  }
+}
+
 @include breakpoint-up(lg) {
   .root {
     &.builderMode {

diff --git a/src/modules/chat/ConversationView.tsx b/src/modules/chat/ConversationView.tsx
@@ -16,21 +16,34 @@
 
 'use client';
 import { Container } from '@/components/Container/Container';
-import { IconButton } from '@carbon/react';
-import { ArrowDown } from '@carbon/react/icons';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { Button, IconButton } from '@carbon/react';
+import { Application, ArrowDown } from '@carbon/react/icons';
+import clsx from 'clsx';
+import {
+  memo,
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { ConversationHeader } from './ConversationHeader';
 import classes from './ConversationView.module.scss';
 import { FilesDropzone } from './layout/FilesDropzone';
 import { InputBar } from './layout/InputBar';
 import { Message } from './message/Message';
 import { useChat, useChatMessages } from './providers/ChatProvider';
 import { useFilesUpload } from './providers/FilesUploadProvider';
-import clsx from 'clsx';
-import { getNewRunSetup, getRunSetup, isBotMessage } from './utils';
 import { BotChatMessage } from './types';
+import { getNewRunSetup, getRunSetup, isBotMessage } from './utils';
+
+interface Props {
+  onShowMobilePreviewButtonClick?: MouseEventHandler<HTMLButtonElement>;
+}
 
-export const ConversationView = memo(function ConversationView() {
+export const ConversationView = memo(function ConversationView({
+  onShowMobilePreviewButtonClick,
+}: Props) {
   const { dropzone } = useFilesUpload();
   const scrollRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
@@ -129,6 +142,20 @@ export const ConversationView = memo(function ConversationView() {
           })}
         </ol>
       </div>
+
+      {onShowMobilePreviewButtonClick && (
+        <div className={classes.previewButton}>
+          <Button
+            kind="secondary"
+            size="sm"
+            onClick={onShowMobilePreviewButtonClick}
+          >
+            <Application />
+            <span>Show app preview</span>
+          </Button>
+        </div>
+      )}
+
       <div className={classes.bottom}>
         {isScrolled && (
           <IconButton