BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance mobile experience by adjusting layout and keyboard handling

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2025-12-18 11:20:37 +02:00
parent db673d8dc4
commit d28c4e9da6
7 changed files with 283 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatContainer.tsx
+16 -4
View File
@@ -145,7 +145,10 @@ export const ChatContainer: React.FC = () => {
if (!currentSessionId) {
return (
<div className="flex flex-col h-full bg-background">
<div
className="flex flex-col h-full bg-background"
style={isMobile ? { paddingBottom: 'var(--oc-keyboard-inset, 0px)' } : undefined}
>
<div className="flex-1 flex items-center justify-center">
<OpenChamberLogo width={140} height={140} className="opacity-20" isAnimated />
</div>
@@ -157,7 +160,10 @@ export const ChatContainer: React.FC = () => {
const hasMessagesEntry = messages.has(currentSessionId);
if (!hasMessagesEntry) {
return (
<div className="flex flex-col h-full bg-background gap-0">
<div
className="flex flex-col h-full bg-background gap-0"
style={isMobile ? { paddingBottom: 'var(--oc-keyboard-inset, 0px)' } : undefined}
>
<div className="flex-1 overflow-y-auto p-4 bg-background">
<div className="chat-column space-y-4">
{[1, 2, 3].map((i) => (
@@ -179,7 +185,10 @@ export const ChatContainer: React.FC = () => {
if (sessionMessages.length === 0 && !streamingMessageId) {
return (
<div className="flex flex-col h-full bg-background transform-gpu">
<div
className="flex flex-col h-full bg-background transform-gpu"
style={isMobile ? { paddingBottom: 'var(--oc-keyboard-inset, 0px)' } : undefined}
>
<div className="flex-1 flex items-center justify-center">
<OpenChamberLogo width={140} height={140} className="opacity-20" isAnimated />
</div>
@@ -191,7 +200,10 @@ export const ChatContainer: React.FC = () => {
}
return (
<div className="flex flex-col h-full bg-background">
<div
className="flex flex-col h-full bg-background"
style={isMobile ? { paddingBottom: 'var(--oc-keyboard-inset, 0px)' } : undefined}
>
<div className="relative flex-1 min-h-0">
<div className="absolute inset-0">