marketing-shibata50/amical
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: formatting fixes

Browse source
This commit is contained in:
haritabh-z01 2025-06-28 11:02:07 +05:30
parent dd6af5e879
commit 119a46c339
167 changed files with 4507 additions and 3248 deletions
Download patch file Download diff file Expand all files Collapse all files

108
apps/desktop/src/renderer/fab.tsx
View file

@ -1,8 +1,8 @@
import React, { useState, useCallback, useRef, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { Waveform } from '../components/Waveform'; // Import Waveform
import { useRecording, RecordingStatus } from '../hooks/useRecording'; // Import the hook and type
import '@/styles/globals.css';
import React, { useState, useCallback, useRef, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { Waveform } from "../components/Waveform"; // Import Waveform
import { useRecording, RecordingStatus } from "../hooks/useRecording"; // Import the hook and type
import "@/styles/globals.css";
const NUM_WAVEFORM_BARS = 8; // Fewer bars for a smaller button
const DEBOUNCE_DELAY = 100; // milliseconds
@ -12,51 +12,60 @@ const FloatingButtonApp: React.FC = () => {
const fabRef = useRef<HTMLButtonElement>(null);
const leaveTimeoutRef = useRef<NodeJS.Timeout | null>(null); // Ref for debounce timeout
const handleAudioChunk = useCallback(async (audioChunk: ArrayBuffer, isFinalChunk: boolean) => {
try {
// Send the audio chunk regardless of whether it's final or not
await window.electronAPI.sendAudioChunk(audioChunk, isFinalChunk);
console.log(`FAB: Sent audio chunk. isFinalChunk: ${isFinalChunk}`);
const handleAudioChunk = useCallback(
async (audioChunk: ArrayBuffer, isFinalChunk: boolean) => {
try {
// Send the audio chunk regardless of whether it's final or not
await window.electronAPI.sendAudioChunk(audioChunk, isFinalChunk);
console.log(`FAB: Sent audio chunk. isFinalChunk: ${isFinalChunk}`);
if (isFinalChunk) {
console.log(
'FAB: This was the final chunk. Informing main process to finalize transcription.'
);
// You might want to add a specific IPC call here if the main process needs an explicit signal
// to finalize transcription, e.g., window.electronAPI.finalizeTranscription();
// For now, we assume sendAudioChunk is enough and the main process handles the stream end.
if (isFinalChunk) {
console.log(
"FAB: This was the final chunk. Informing main process to finalize transcription.",
);
// You might want to add a specific IPC call here if the main process needs an explicit signal
// to finalize transcription, e.g., window.electronAPI.finalizeTranscription();
// For now, we assume sendAudioChunk is enough and the main process handles the stream end.
}
} catch (error) {
console.error("FAB: Error sending audio chunk:", error);
}
} catch (error) {
console.error('FAB: Error sending audio chunk:', error);
}
}, []);
},
[],
);
const { recordingStatus, startRecording, stopRecording, voiceDetected } = useRecording({
onAudioChunk: handleAudioChunk,
onRecordingStartCallback: async () => await window.electronAPI.onRecordingStarting(),
onRecordingStopCallback: async () => await window.electronAPI.onRecordingStopping(),
// Optionally, set chunkDurationMs here if needed, e.g., chunkDurationMs: 250
});
const isRecording = recordingStatus === 'recording' || recordingStatus === 'starting';
const isAwaitingFinalChunk = recordingStatus === 'stopping';
console.log('FAB: recordingStatus:', recordingStatus);
const { recordingStatus, startRecording, stopRecording, voiceDetected } =
useRecording({
onAudioChunk: handleAudioChunk,
onRecordingStartCallback: async () =>
await window.electronAPI.onRecordingStarting(),
onRecordingStopCallback: async () =>
await window.electronAPI.onRecordingStopping(),
// Optionally, set chunkDurationMs here if needed, e.g., chunkDurationMs: 250
});
const isRecording =
recordingStatus === "recording" || recordingStatus === "starting";
const isAwaitingFinalChunk = recordingStatus === "stopping";
console.log("FAB: recordingStatus:", recordingStatus);
useEffect(() => {
const cleanup = window.electronAPI.onRecordingStateChanged((newState: boolean) => {
console.log('FAB: Received new recording state:', newState);
if (newState) {
startRecording();
} else {
stopRecording();
}
});
const cleanup = window.electronAPI.onRecordingStateChanged(
(newState: boolean) => {
console.log("FAB: Received new recording state:", newState);
if (newState) {
startRecording();
} else {
stopRecording();
}
},
);
return cleanup; // Cleanup the listener when the component unmounts
}, [startRecording, stopRecording]);
// This handler is for the button click.
// It now uses the toggleRecording from the hook.
const handleButtonClickToggleRecording = () => {
console.log('FAB: Invoking toggleRecording from hook.');
console.log("FAB: Invoking toggleRecording from hook.");
// The hook internally manages starting/stopping MediaRecorder and VAD.
// The hook also listens for global state changes from the main process.
};
@ -72,7 +81,7 @@ const FloatingButtonApp: React.FC = () => {
// Update window size when recording or hover state changes
useEffect(() => {
console.log('is hovered', isHovered);
console.log("is hovered", isHovered);
updateWindowSizeToFab();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isRecording, isHovered]);
@ -106,9 +115,9 @@ const FloatingButtonApp: React.FC = () => {
}, []);
const expanded =
recordingStatus === 'recording' ||
recordingStatus === 'starting' ||
recordingStatus === 'stopping' ||
recordingStatus === "recording" ||
recordingStatus === "starting" ||
recordingStatus === "stopping" ||
isHovered;
return (
@ -120,7 +129,7 @@ const FloatingButtonApp: React.FC = () => {
onMouseLeave={handleMouseLeave}
className={`
transition-all duration-200 ease-in-out
${expanded ? 'h-[32px] w-[96px]' : 'h-[16px] w-[48px]'}
${expanded ? "h-[32px] w-[96px]" : "h-[16px] w-[48px]"}
rounded-full border-2 border-text-muted bg-black/10 border-muted-foreground
mb-2
`}
@ -131,7 +140,10 @@ const FloatingButtonApp: React.FC = () => {
<Waveform
key={index}
index={index}
isRecording={recordingStatus === 'recording' || recordingStatus === 'starting'}
isRecording={
recordingStatus === "recording" ||
recordingStatus === "starting"
}
voiceDetected={voiceDetected} // Use local state for VAD
baseHeight={100} // Percentage of its container (the 40% height div)
silentHeight={20} // Percentage
@ -143,10 +155,12 @@ const FloatingButtonApp: React.FC = () => {
);
};
const container = document.getElementById('root');
const container = document.getElementById("root");
if (container) {
const root = createRoot(container);
root.render(<FloatingButtonApp />);
} else {
console.error('FloatingButton: Root element not found in floating-button.html');
console.error(
"FloatingButton: Root element not found in floating-button.html",
);
}

60
apps/desktop/src/renderer/renderer.tsx
View file

@ -26,21 +26,25 @@
* ```
*/
import React, { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ipcLink } from 'electron-trpc-experimental/renderer';
import superjson from 'superjson';
import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar';
import { AppSidebar } from '@/components/app-sidebar';
import { ThemeProvider } from '@/components/theme-provider';
import { TranscriptionsView } from '@/components/transcriptions-view';
import { VocabularyView } from '@/components/vocabulary-view';
import { ModelsView } from '@/components/models-view';
import { SettingsView } from '@/components/settings-view';
import '@/styles/globals.css';
import { SiteHeader } from '@/components/site-header';
import { api } from '@/trpc/react';
import React, { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ipcLink } from "electron-trpc-experimental/renderer";
import superjson from "superjson";
import {
SidebarProvider,
SidebarInset,
SidebarTrigger,
} from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/app-sidebar";
import { ThemeProvider } from "@/components/theme-provider";
import { TranscriptionsView } from "@/components/transcriptions-view";
import { VocabularyView } from "@/components/vocabulary-view";
import { ModelsView } from "@/components/models-view";
import { SettingsView } from "@/components/settings-view";
import "@/styles/globals.css";
import { SiteHeader } from "@/components/site-header";
import { api } from "@/trpc/react";
// import { Waveform } from '../components/Waveform'; // Waveform might not be needed if hook is removed
// import { useRecording } from '../hooks/useRecording'; // Remove hook import
@ -65,27 +69,27 @@ const trpcClient = api.createClient({
const App: React.FC = () => {
const [currentView, setCurrentView] = useState(() => {
// Try to restore the view from localStorage, fallback to default
if (typeof window !== 'undefined') {
return localStorage.getItem('amical-current-view') || 'Voice Recording';
if (typeof window !== "undefined") {
return localStorage.getItem("amical-current-view") || "Voice Recording";
}
return 'Voice Recording';
return "Voice Recording";
});
const handleNavigation = (item: any) => {
setCurrentView(item.title);
// Save to localStorage to preserve during HMR
localStorage.setItem('amical-current-view', item.title);
localStorage.setItem("amical-current-view", item.title);
};
const renderContent = () => {
switch (currentView) {
case 'Transcriptions':
case "Transcriptions":
return <TranscriptionsView />;
case 'Vocabulary':
case "Vocabulary":
return <VocabularyView />;
case 'Models':
case "Models":
return <ModelsView />;
case 'Settings':
case "Settings":
return <SettingsView />;
default:
return (
@ -104,8 +108,8 @@ const App: React.FC = () => {
<SidebarProvider
style={
{
'--sidebar-width': 'calc(var(--spacing) * 72)',
'--header-height': 'calc(var(--spacing) * 12)',
"--sidebar-width": "calc(var(--spacing) * 72)",
"--header-height": "calc(var(--spacing) * 12)",
} as React.CSSProperties
}
>
@ -125,8 +129,8 @@ const App: React.FC = () => {
<div
className="mx-auto w-full flex flex-col gap-4 md:gap-6"
style={{
maxWidth: 'var(--content-max-width)',
padding: 'var(--content-padding)',
maxWidth: "var(--content-max-width)",
padding: "var(--content-padding)",
}}
>
{renderContent()}
@ -143,7 +147,7 @@ const App: React.FC = () => {
);
};
const container = document.getElementById('root');
const container = document.getElementById("root");
if (container) {
const root = createRoot(container);
root.render(<App />);