feat: release 1.0 - rename to Hearbit AI, fix timestamps, update UI
This commit is contained in:
michael.borak
214
src/App.tsx
214
src/App.tsx
@@ -1,23 +1,145 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from 'react';
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import { Settings as SettingsIcon } from "lucide-react";
|
||||
import Settings from "./components/Settings";
|
||||
import Recorder from "./components/Recorder";
|
||||
import LogViewer, { LogEntry } from "./components/LogViewer";
|
||||
import TranscriptionView from "./components/TranscriptionView";
|
||||
import Tabs from "./components/Tabs";
|
||||
|
||||
interface PromptTemplate {
|
||||
export interface PromptTemplate {
|
||||
id: string;
|
||||
name: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [view, setView] = useState<'recorder' | 'settings'>('recorder');
|
||||
const [view, setView] = useState<'recorder' | 'logs' | 'settings' | 'transcription'>('recorder');
|
||||
// Keep track of the *previous* tab to return to from settings
|
||||
const [lastTab, setLastTab] = useState<'recorder' | 'logs' | 'transcription'>('recorder');
|
||||
|
||||
const [apiKey, setApiKey] = useState(localStorage.getItem('infomaniak_api_key') || '');
|
||||
const [productId, setProductId] = useState(localStorage.getItem('infomaniak_product_id') || '');
|
||||
const [savePath, setSavePath] = useState(localStorage.getItem('infomaniak_save_path') || '');
|
||||
|
||||
// Default prompts if none exist
|
||||
/* eslint-disable no-useless-escape */ // Escape quotes in prompts
|
||||
const defaultPrompts: PromptTemplate[] = [
|
||||
{ id: '1', name: 'General Summary', content: 'Summarize the following text into clear bullet points.' },
|
||||
{ id: '2', name: 'Action Items', content: 'Extract all action items and tasks from this text.' },
|
||||
{ id: '3', name: 'Email Draft', content: 'Draft a follow-up email based on this conversation.' }
|
||||
{
|
||||
id: '1',
|
||||
name: 'Meeting Protokoll (General)',
|
||||
content: `Rolle: Du bist ein hochprofessioneller, effizienter Protokollführer und persönlicher Assistent. Deine Aufgabe ist es, aus dem untenstehenden Roh-Transkript (oder den Notizen) ein strukturiertes, leicht lesbares und handlungsorientiertes Ergebnisprotokoll zu erstellen.
|
||||
|
||||
Anweisungen:
|
||||
- Filterung: Ignoriere Smalltalk, Füllwörter, Begrüßungen und irrelevante Abschweifungen. Konzentriere dich auf Fakten, Entscheidungen und Aufgaben.
|
||||
- Tonalität: Schreibe sachlich, objektiv und präzise (Business German).
|
||||
- Klarheit: Formuliere vage Aussagen in klare Sätze um, ohne den Sinn zu verändern.
|
||||
- Zuordnung: Ordne Aufgaben immer einer Person zu (wenn im Text genannt).
|
||||
|
||||
Gewünschte Struktur des Outputs:
|
||||
|
||||
# Meeting Protokoll: [Thema des Meetings]
|
||||
|
||||
Datum: [Datum einfügen, falls bekannt, sonst "N/A"]
|
||||
Anwesende: [Liste der Namen]
|
||||
|
||||
## 1. Management Summary
|
||||
Eine kurze Zusammenfassung der wichtigsten Punkte in 3-5 Sätzen. Worum ging es im Kern?
|
||||
|
||||
## 2. Wichtige Entscheidungen
|
||||
[Entscheidung 1]
|
||||
[Entscheidung 2]
|
||||
(Liste hier nur Dinge auf, die explizit beschlossen wurden)
|
||||
|
||||
## 3. Offene Fragen / Diskussionspunkte
|
||||
Kurze Stichpunkte zu Themen, die besprochen, aber noch nicht final geklärt wurden.
|
||||
|
||||
## 4. Action Items (To-Dos)
|
||||
| Was ist zu tun? | Wer ist verantwortlich? | Bis wann? (falls genannt) |
|
||||
| :--- | :--- | :--- |
|
||||
| [Aufgabe 1] | [Name] | [Datum] |
|
||||
| [Aufgabe 2] | [Name] | [Datum] |
|
||||
|
||||
## 5. Nächste Schritte / Nächstes Meeting
|
||||
Kurze Info zum weiteren Vorgehen.`
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '1:1 Gespräch / Jour Fixe',
|
||||
content: `Rolle: Du bist ein diskreter und empathischer Executive Assistant. Deine Aufgabe ist es, ein 1:1 Gespräch zwischen einem Mitarbeiter und seinem Vorgesetzten zusammenzufassen. Das Gespräch beinhaltet sowohl geschäftliche als auch private/persönliche Themen.
|
||||
|
||||
Wichtige Anweisungen:
|
||||
- Kategorisierung: Trenne strikt zwischen "Persönlichem/Atmosphäre" und "Operativem Business".
|
||||
- Tonalität bei Privatem: Fasse private Themen (Wochenende, Hobbys, Familie, Wohlbefinden) als fließenden Text zusammen. Sei hier warmherzig, aber diskret. Vermeide Stichpunkte, das wirkt bei Privatem zu mechanisch.
|
||||
- Tonalität bei Business: Sei hier gewohnt präzise, faktenbasiert und nutze Bulletpoints.
|
||||
- Sensibilität: Wenn über Feedback, Karriereentwicklung oder Kritik gesprochen wurde, fasse dies in einem separaten Abschnitt neutral und konstruktiv zusammen.
|
||||
|
||||
Gewünschte Struktur des Outputs:
|
||||
|
||||
# 1:1 Gesprächszusammenfassung
|
||||
|
||||
Datum: [Datum]
|
||||
Teilnehmer: [Namen]
|
||||
|
||||
## 1. Persönlicher Check-in & Atmosphäre
|
||||
[Hier bitte einen kurzen Fließtext schreiben: Wie geht es den Teilnehmern? Was wurde an privaten Updates geteilt (z.B. Urlaub, Familie, Hobbys)? Wie war die Grundstimmung des Gesprächs?]
|
||||
|
||||
## 2. Operative Themen (Business Updates)
|
||||
Thema A: [Kurze Zusammenfassung]
|
||||
Thema B: [Kurze Zusammenfassung]
|
||||
(Führe hier die konkreten Arbeitsthemen auf)
|
||||
|
||||
## 3. Feedback & Entwicklung
|
||||
[Hier notieren, falls über Karriereziele, Gehalt, Weiterbildung oder gegenseitiges Feedback gesprochen wurde. Falls nicht besprochen: "Keine Themen in diesem Meeting".]
|
||||
|
||||
## 4. Vereinbarungen & Action Items
|
||||
| Wer? | Was ist zu tun / zu beachten? | Bis wann? |
|
||||
| :--- | :--- | :--- |
|
||||
| [Name] | [Aufgabe] | [Datum] |
|
||||
| [Name] | [Aufgabe] | [Datum] |`
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Kundenmeeting (Official)',
|
||||
content: `Rolle: Du bist ein professioneller Account Manager und Business Analyst. Erstelle ein Protokoll für ein Kundenmeeting. Deine Tonalität ist höflich, verbindlich und extrem präzise. Das Ergebnis soll so formuliert sein, dass es theoretisch direkt an den Kunden gesendet werden kann.
|
||||
|
||||
Wichtige Anweisungen:
|
||||
- Fokus auf Vereinbarungen: Was wurde genau beschlossen? Wenn der Kunde eine Anforderung geändert hat, notiere das explizit.
|
||||
- Verantwortlichkeiten trennen: Trenne bei den To-Dos strikt zwischen "Aufgaben für uns (Auftragnehmer)" und "Aufgaben für den Kunden" (z.B. Material liefern, Freigaben).
|
||||
- Klarheit vor Länge: Vermeide interne Fachsprache, wenn möglich. Schreibe so, dass der Kunde es versteht.
|
||||
- Diplomatie: Falls es Konflikte gab, formuliere diese lösungsorientiert und neutral (z.B. statt "Kunde hat sich beschwert" schreibe "Es wurde Feedback zu X besprochen, Lösungsweg ist Y").
|
||||
|
||||
Gewünschte Struktur des Outputs:
|
||||
|
||||
# Ergebnisprotokoll: [Projektname / Thema]
|
||||
|
||||
Datum: [Datum]
|
||||
Teilnehmer: [Namen Kunden] & [Namen Intern]
|
||||
|
||||
## 1. Zusammenfassung (Executive Summary)
|
||||
2-3 Sätze zum Ziel des Termins und dem aktuellen Status (z.B. "Wir haben den aktuellen Design-Sprint besprochen und die Anforderungen für Phase 2 finalisiert.")
|
||||
|
||||
## 2. Besprochene Punkte & Projektstatus
|
||||
[Thema 1]: Kurze Zusammenfassung der Diskussion.
|
||||
[Thema 2]: Kurze Zusammenfassung der Diskussion.
|
||||
|
||||
## 3. Wichtige Entscheidungen & Genehmigungen
|
||||
(Dies ist der wichtigste Teil für die Absicherung!)
|
||||
✅ Beschluss: [Was wurde final entschieden/freigegeben?]
|
||||
🔄 Änderung: [Wurde der Projektumfang geändert? Neue Anforderungen?]
|
||||
|
||||
## 4. Action Items (Wer macht was?)
|
||||
|
||||
👉 Aufgaben für uns (Intern):
|
||||
[ ] [Aufgabe] (bis [Datum])
|
||||
[ ] [Aufgabe] (bis [Datum])
|
||||
|
||||
👉 Aufgaben für den Kunden (To-Dos / Lieferungen):
|
||||
[ ] [Aufgabe, z.B. Zugangdaten senden, Design freigeben] (bis [Datum])
|
||||
|
||||
## 5. Nächster Termin / Timeline
|
||||
Wann findet das nächste Meeting statt oder was ist der nächste Meilenstein?`
|
||||
}
|
||||
];
|
||||
|
||||
const [prompts, setPrompts] = useState<PromptTemplate[]>(() => {
|
||||
@@ -25,14 +147,16 @@ function App() {
|
||||
return saved ? JSON.parse(saved) : defaultPrompts;
|
||||
});
|
||||
|
||||
const handleSaveSettings = (newApiKey: string, newProductId: string, newPrompts: PromptTemplate[]) => {
|
||||
const handleSaveSettings = (newApiKey: string, newProductId: string, newPrompts: PromptTemplate[], newSavePath: string) => {
|
||||
setApiKey(newApiKey);
|
||||
setProductId(newProductId);
|
||||
setPrompts(newPrompts);
|
||||
setSavePath(newSavePath);
|
||||
localStorage.setItem('infomaniak_api_key', newApiKey);
|
||||
localStorage.setItem('infomaniak_product_id', newProductId);
|
||||
localStorage.setItem('infomaniak_prompts', JSON.stringify(newPrompts));
|
||||
setView('recorder');
|
||||
localStorage.setItem('infomaniak_save_path', newSavePath);
|
||||
setView(lastTab);
|
||||
};
|
||||
|
||||
// State for Recorder (lifted to persist across view changes)
|
||||
@@ -76,19 +200,56 @@ function App() {
|
||||
const handleLoadHistory = (item: HistoryItem) => {
|
||||
setTranscription(item.transcription);
|
||||
setSummary(item.summary);
|
||||
setView('recorder'); // Ensure we go back to recorder to see it
|
||||
};
|
||||
|
||||
// Logs State
|
||||
const [logs, setLogs] = useState<LogEntry[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const unlisten = listen<LogEntry>('log-event', (event) => {
|
||||
setLogs((prevLogs) => [...prevLogs, event.payload]);
|
||||
});
|
||||
|
||||
return () => {
|
||||
unlisten.then(f => f());
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground flex flex-col select-none">
|
||||
<div className="flex-1 flex flex-col justify-center h-full">
|
||||
{view === 'recorder' ? (
|
||||
<div className="min-h-screen bg-background text-foreground flex flex-col select-none overflow-hidden">
|
||||
{/* Top Navigation Bar */}
|
||||
{view !== 'settings' && (
|
||||
<div className="w-full flex justify-center items-center pt-4 pb-2 z-20 relative bg-background/95 backdrop-blur">
|
||||
<div className="absolute right-4 top-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
setLastTab(view === 'logs' ? 'logs' : 'recorder');
|
||||
setView('settings');
|
||||
}}
|
||||
className="p-2 text-muted-foreground hover:text-foreground hover:bg-secondary rounded-full transition-colors"
|
||||
>
|
||||
<SettingsIcon size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Tabs
|
||||
currentTab={view as 'recorder' | 'logs' | 'transcription'}
|
||||
onTabChange={(t) => setView(t)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 flex flex-col h-full overflow-hidden relative">
|
||||
{view === 'recorder' && (
|
||||
<Recorder
|
||||
apiKey={apiKey}
|
||||
productId={productId}
|
||||
prompts={prompts}
|
||||
onOpenSettings={() => setView('settings')}
|
||||
onOpenSettings={() => {
|
||||
setLastTab('recorder');
|
||||
setView('settings');
|
||||
}}
|
||||
transcription={transcription}
|
||||
setTranscription={setTranscription}
|
||||
summary={summary}
|
||||
@@ -97,23 +258,30 @@ function App() {
|
||||
onSaveToHistory={handleSaveToHistory}
|
||||
onDeleteHistory={handleDeleteHistory}
|
||||
onLoadHistory={handleLoadHistory}
|
||||
savePath={savePath}
|
||||
onRecordingComplete={() => setView('transcription')}
|
||||
/>
|
||||
) : (
|
||||
)}
|
||||
|
||||
{view === 'transcription' && (
|
||||
<TranscriptionView transcription={transcription} summary={summary} />
|
||||
)}
|
||||
|
||||
{view === 'logs' && (
|
||||
<LogViewer logs={logs} />
|
||||
)}
|
||||
|
||||
{view === 'settings' && (
|
||||
<Settings
|
||||
onSave={handleSaveSettings}
|
||||
onBack={() => setView('recorder')}
|
||||
initialApiKey={apiKey}
|
||||
initialProductId={productId}
|
||||
initialPrompts={prompts}
|
||||
onClose={() => setView(lastTab)}
|
||||
apiKey={apiKey}
|
||||
productId={productId}
|
||||
prompts={prompts}
|
||||
savePath={savePath}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{view === 'settings' && (
|
||||
<div className="fixed top-4 right-4 z-50">
|
||||
{/* Close button handled inside Settings typically */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user