Skip to content

Commit

Permalink
Merge branch 'enricoros:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
icratech authored Mar 12, 2024
2 parents 1c71094 + 5c22061 commit 4041962
Show file tree
Hide file tree
Showing 37 changed files with 1,428 additions and 779 deletions.
10 changes: 10 additions & 0 deletions pages/dev/beam.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import * as React from 'react';

import { AppBeam } from '../../src/apps/beam/AppBeam';

import { withLayout } from '~/common/layout/withLayout';


export default function BeamPage() {
return withLayout({ type: 'optima' }, <AppBeam />);
}
36 changes: 19 additions & 17 deletions src/apps/AppPlaceholder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useRouterRoute } from '~/common/app.routes';
* https://github.com/enricoros/big-AGI/issues/299
*/
export function AppPlaceholder(props: {
title?: string,
title?: string | null,
text?: React.ReactNode,
children?: React.ReactNode,
}) {
Expand All @@ -29,23 +29,25 @@ export function AppPlaceholder(props: {
border: '1px solid blue',
}}>

<Box sx={{
my: 'auto',
display: 'flex', flexDirection: 'column', alignItems: 'center',
gap: 4,
border: '1px solid red',
}}>

<Typography level='h1'>
{placeholderAppName}
</Typography>
{!!props.text && (
<Typography>
{props.text}
</Typography>
)}
{(props.title !== null || !!props.text) && (
<Box sx={{
my: 'auto',
display: 'flex', flexDirection: 'column', alignItems: 'center',
gap: 4,
border: '1px solid red',
}}>

</Box>
<Typography level='h1'>
{placeholderAppName}
</Typography>
{!!props.text && (
<Typography>
{props.text}
</Typography>
)}

</Box>
)}

{props.children}

Expand Down
84 changes: 84 additions & 0 deletions src/apps/beam/AppBeam.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import * as React from 'react';

import { Box, Button, Typography } from '@mui/joy';

import { useModelsStore } from '~/modules/llms/store-llms';

import { BeamView } from '~/common/beam/BeamView';
import { BeamStoreApi, createBeamStore, useBeamStore } from '~/common/beam/store-beam';
import { createDConversation, createDMessage, DConversation, DMessage } from '~/common/state/store-chats';
import { useIsMobile } from '~/common/components/useMatchMedia';
import { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';


function initTestConversation(): DConversation {
const conversation = createDConversation();
conversation.messages.push(createDMessage('system', 'You are a helpful assistant.'));
conversation.messages.push(createDMessage('user', 'Hello, who are you?'));
return conversation;
}

function initTestBeam(messages: DMessage[]): BeamStoreApi {
const beamStore = createBeamStore();
beamStore.getState().open(messages, useModelsStore.getState().chatLLMId);
return beamStore;
}


export function AppBeam() {

// state
const conversation = React.useRef<DConversation>(initTestConversation());
const beamStoreApi = React.useRef(initTestBeam(conversation.current.messages)).current;
const [showDebug, setShowDebug] = React.useState(false);

// external state
const isMobile = useIsMobile();
const beamStore = useBeamStore(beamStoreApi, state => state);

// layout
usePluggableOptimaLayout(null, React.useMemo(() => <>
{/* button to toggle debug info */}
<Button size='sm' variant='plain' color='neutral' onClick={() => setShowDebug(on => !on)}>
{showDebug ? 'Hide' : 'Show'} debug
</Button>

{/* 'open' */}
<Button size='sm' variant='plain' color='neutral' onClick={() => {
conversation.current = initTestConversation();
beamStoreApi.getState().open(conversation.current.messages, useModelsStore.getState().chatLLMId);
}}>
.open
</Button>

{/* 'close' */}
<Button size='sm' variant='plain' color='neutral' onClick={() => beamStoreApi.getState().close()}>
.close
</Button>
</>, [beamStoreApi, showDebug]), null, 'AppBeam');

return (
<Box sx={{ flexGrow: 1, overflowY: 'auto', position: 'relative' }}>

<BeamView
beamStore={beamStoreApi}
isMobile={isMobile}
sx={{ height: '100%' }}
/>

{showDebug && (
<Typography level='body-xs' sx={{
whiteSpace: 'pre',
position: 'absolute',
inset: 0,
zIndex: 1 /* debug on top of BeamView */,
backdropFilter: 'blur(8px)',
padding: '1rem',
}}>
{JSON.stringify({ conversationId: conversation.current.id, beamStore }, null, 2)}
</Typography>
)}

</Box>
);
}
42 changes: 2 additions & 40 deletions src/apps/call/CallWizard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,51 +10,13 @@ import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
import WarningRoundedIcon from '@mui/icons-material/WarningRounded';

import { PreferencesTab, useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
import { cssRainbowColorKeyframes } from '~/common/app.theme';
import { animationColorRainbow } from '~/common/util/animUtils';
import { navigateBack } from '~/common/app.routes';
import { useCapabilityBrowserSpeechRecognition, useCapabilityElevenLabs } from '~/common/components/useCapabilities';
import { useChatStore } from '~/common/state/store-chats';
import { useUICounter } from '~/common/state/store-ui';


/*export const cssRainbowBackgroundKeyframes = keyframes`
100%, 0% {
background-color: rgb(128, 0, 0);
}
8% {
background-color: rgb(102, 51, 0);
}
16% {
background-color: rgb(64, 64, 0);
}
25% {
background-color: rgb(38, 76, 0);
}
33% {
background-color: rgb(0, 89, 0);
}
41% {
background-color: rgb(0, 76, 41);
}
50% {
background-color: rgb(0, 64, 64);
}
58% {
background-color: rgb(0, 51, 102);
}
66% {
background-color: rgb(0, 0, 128);
}
75% {
background-color: rgb(63, 0, 128);
}
83% {
background-color: rgb(76, 0, 76);
}
91% {
background-color: rgb(102, 0, 51);
}`;*/

function StatusCard(props: { icon: React.JSX.Element, hasIssue: boolean, text: string, button?: React.JSX.Element }) {
return (
<Card sx={{ width: '100%' }}>
Expand Down Expand Up @@ -124,7 +86,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string | n

<Typography level='title-lg' sx={{ fontSize: '3rem', fontWeight: 'sm', textAlign: 'center' }}>
Welcome to<br />
<Box component='span' sx={{ animation: `${cssRainbowColorKeyframes} 15s linear infinite` }}>
<Box component='span' sx={{ animation: `${animationColorRainbow} 15s linear infinite` }}>
your first call
</Box>
</Typography>
Expand Down
26 changes: 2 additions & 24 deletions src/apps/call/Contacts.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from 'react';
import { shallow } from 'zustand/shallow';
import { keyframes } from '@emotion/react';

import type { SxProps } from '@mui/joy/styles/types';
import { Avatar, Box, Card, CardContent, Chip, IconButton, Link as MuiLink, ListDivider, MenuItem, Sheet, Switch, Typography } from '@mui/joy';
import CallIcon from '@mui/icons-material/Call';

import { GitHubProjectIssueCard } from '~/common/components/GitHubProjectIssueCard';
import { animationShadowLimey } from '~/common/util/animUtils';
import { conversationTitle, DConversation, DConversationId, useChatStore } from '~/common/state/store-chats';
import { usePluggableOptimaLayout } from '~/common/layout/optima/useOptimaLayout';

Expand All @@ -19,27 +19,6 @@ import { useAppCallStore } from './state/store-app-call';
const COLLAPSED_COUNT = 2;


export const niceShadowKeyframes = keyframes`
100%, 0% {
//background-color: rgb(102, 0, 51);
box-shadow: 1px 1px 0 white, 2px 2px 12px rgb(183, 255, 0);
}
25% {
//background-color: rgb(76, 0, 76);
box-shadow: 1px 1px 0 white, 2px 2px 12px rgb(255, 251, 0);
//scale: 1.2;
}
50% {
//background-color: rgb(63, 0, 128);
box-shadow: 1px 1px 0 white, 2px 2px 12px rgba(0, 255, 81);
//scale: 0.8;
}
75% {
//background-color: rgb(0, 0, 128);
box-shadow: 1px 1px 0 white, 2px 2px 12px rgb(255, 153, 0);
}`;


const ContactCardAvatar = (props: { size: string, symbol?: string, imageUrl?: string, onClick?: () => void, sx?: SxProps }) =>
<Avatar
// variant='outlined'
Expand Down Expand Up @@ -125,7 +104,6 @@ function CallContactCard(props: {
sx={{
mx: 'auto',
mt: '-2.5rem',
zIndex: 1,
}}
/>

Expand Down Expand Up @@ -282,7 +260,7 @@ export function Contacts(props: { setCallIntent: (intent: AppCallIntent) => void
borderRadius: '50%',
pointerEvents: 'none',
backgroundColor: 'background.popup',
animation: `${niceShadowKeyframes} 5s infinite`,
animation: `${animationShadowLimey} 5s infinite`,
}}>
<CallIcon />
</IconButton>
Expand Down
15 changes: 2 additions & 13 deletions src/apps/call/components/CallAvatar.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,8 @@
import * as React from 'react';
import { keyframes } from '@emotion/react';

import { Avatar, Box } from '@mui/joy';


const cssScaleKeyframes = keyframes`
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}`;
import { animationScalePulse } from '~/common/util/animUtils';


export function CallAvatar(props: { symbol: string, imageUrl?: string, isRinging?: boolean, onClick: () => void }) {
Expand All @@ -34,7 +23,7 @@ export function CallAvatar(props: { symbol: string, imageUrl?: string, isRinging
<Box
sx={{
...(props.isRinging
? { animation: `${cssScaleKeyframes} 1.4s ease-in-out infinite` }
? { animation: `${animationScalePulse} 1.4s ease-in-out infinite` }
: {}),
}}
>
Expand Down
15 changes: 6 additions & 9 deletions src/apps/chat/AppChat.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { imaginePromptFromText } from '~/modules/aifn/imagine/imaginePromptFromT
import { speakText } from '~/modules/elevenlabs/elevenlabs.client';
import { useCapabilityTextToImage } from '~/modules/t2i/t2i.client';

import { BeamView } from '~/common/beam/BeamView';
import { Brand } from '~/common/app.config';
import { ConfirmationModal } from '~/common/components/ConfirmationModal';
import { GlobalShortcutItem, ShortcutKeyName, useGlobalShortcuts } from '~/common/components/useGlobalShortcut';
Expand All @@ -25,7 +26,6 @@ import { useOptimaLayout, usePluggableOptimaLayout } from '~/common/layout/optim
import { useUIPreferencesStore } from '~/common/state/store-ui';

import type { ComposerOutputMultiPart } from './components/composer/composer.types';
import { BeamView } from './components/beam/BeamView';
import { ChatDrawerMemo } from './components/ChatDrawer';
import { ChatDropdowns } from './components/ChatDropdowns';
import { ChatMessageList } from './components/ChatMessageList';
Expand Down Expand Up @@ -469,6 +469,7 @@ export function AppChat() {
{chatPanes.map((pane, idx) => {
const _paneConversationId = pane.conversationId;
const _paneChatHandler = chatHandlers[idx] ?? null;
const _paneChatBeamStore = _paneChatHandler?.getBeamStore() ?? null;
const _panesCount = chatPanes.length;
const _keyAndId = `chat-pane-${pane.paneId}`;
const _sepId = `sep-pane-${idx}`;
Expand Down Expand Up @@ -557,19 +558,15 @@ export function AppChat() {

</ScrollToBottom>

{!!_paneChatHandler && (
{!!_paneChatBeamStore && (
<BeamView
key={`beam-${_paneConversationId}` /* used to invalidate state when switching chats */}
conversationHandler={_paneChatHandler}
beamStore={_paneChatBeamStore}
isMobile={isMobile}
sx={{
overflowY: 'auto',
backgroundColor: 'background.level1',
// backgroundColor: `rgba(${theme.vars.palette.neutral.lightChannel} / 0.9)`,
// backdropFilter: 'blur(6px)',
position: 'absolute',
inset: 0,
zIndex: 1, // stay on top of Chips :shrug:
zIndex: 10, // stay on top of Message > Chips (:1), and Overlays (:2) :shrug:
}}
/>
)}
Expand Down Expand Up @@ -600,7 +597,7 @@ export function AppChat() {
onTextImagine={handleTextImagine}
setIsMulticast={setIsComposerMulticast}
sx={{
zIndex: 21, // position: 'sticky', bottom: 0,
zIndex: 51, // just to allocate a surface, and potentially have a shadow
backgroundColor: themeBgAppChatComposer,
borderTop: `1px solid`,
borderTopColor: 'divider',
Expand Down
Loading

1 comment on commit 4041962

@vercel
Copy link

@vercel vercel bot commented on 4041962 Mar 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.