93: Added information about assistente to home page

jarmatys · Jun 1, 2024 · 4cb5c88 · 4cb5c88
1 parent cf58f4b
commit 4cb5c88
Show file tree

Hide file tree

Showing 6 changed files with 198 additions and 12 deletions.
diff --git a/API/ASSISTENTE.UI/App.razor b/API/ASSISTENTE.UI/App.razor
@@ -1,7 +1,7 @@
 <Router AppAssembly="@typeof(App).Assembly">
     <Found Context="routeData">
         <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
-        <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
+        <FocusOnNavigate RouteData="@routeData"/>
     </Found>
     <NotFound>
         <PageTitle>Not found</PageTitle>

diff --git a/API/ASSISTENTE.UI/Layout/MainLayout.razor b/API/ASSISTENTE.UI/Layout/MainLayout.razor
@@ -1,23 +1,25 @@
 @inherits LayoutComponentBase
 
-<MudThemeProvider/>
+<MudThemeProvider Theme="_assistenteTheme"/>
 <MudDialogProvider/>
 <MudSnackbarProvider/>
 
 <MudLayout>
     <MudAppBar Elevation="1" Dense="true">
-        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@DrawerToggle" />
-        <MudSpacer />
-        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Href="https://github.com/jarmatys/DEV_ASSISTENTE" Target="_blank" />
+        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@DrawerToggle"/>
+        <MudSpacer/>
+        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Href="https://github.com/jarmatys/DEV_ASSISTENTE" Target="_blank"/>
+        <MudIconButton Icon="@Icons.Custom.Brands.YouTube" Color="Color.Inherit" Href="https://www.youtube.com/watch?v=5l5J5WqOT2w" Target="_blank"/>
+        <MudIconButton Icon="@Icons.Material.Filled.FindInPage" Color="Color.Inherit" Href="https://assistente.dev" Target="_blank"/>
     </MudAppBar>
     <MudDrawer @bind-Open="@_drawerOpen" ClipMode="@DrawerClipMode.Docked" Elevation="1" Variant="@DrawerVariant.Responsive">
         <MudDrawerHeader>
             <MudText Typo="Typo.h6">ASSISTENTE.DEV</MudText>
         </MudDrawerHeader>
         <NavMenu/>
     </MudDrawer>
-    <MudMainContent Class="pt-16 px-16">
-        <MudContainer MaxWidth="MaxWidth.Medium" Class="pt-3">
+    <MudMainContent>
+        <MudContainer MaxWidth="MaxWidth.Large" Class="pt-16 pb-16">
             @Body
         </MudContainer>
     </MudMainContent>
@@ -32,4 +34,45 @@
         _drawerOpen = !_drawerOpen;
     }
 
+    readonly MudTheme _assistenteTheme = new()
+    {
+        Typography = new Typography
+        {
+            H1 = new H1
+            {
+                FontSize = "2.5rem",
+                FontWeight = 700,
+            },
+            H2 = new H2
+            {
+                FontSize = "2.25rem",
+                FontWeight = 600,
+            },
+            H3 = new H3
+            {
+                FontSize = "2.0rem",
+                FontWeight = 500,
+            },
+            H4 = new H4
+            {
+                FontSize = "1.75rem",
+                FontWeight = 500,
+            },
+            H5 = new H5
+            {
+                FontSize = "1.5rem",
+                FontWeight = 500,
+            },
+            H6 = new H6
+            {
+                FontSize = "1.25rem",
+                FontWeight = 500,
+            },
+            Default = new Default()
+            {
+                FontFamily = ["Poppins"]
+            }
+        }
+    };
+
 }
diff --git a/API/ASSISTENTE.UI/Layout/NavMenu.razor b/API/ASSISTENTE.UI/Layout/NavMenu.razor
@@ -1,5 +1,5 @@
 <MudNavMenu>
-    <MudNavLink Href="/" Icon="@Icons.Material.Filled.Home" Match="NavLinkMatch.All">Home</MudNavLink>
+    <MudNavLink Href="/" Icon="@Icons.Material.Filled.Home" Match="NavLinkMatch.All">Getting started</MudNavLink>
     <MudNavLink Href="/questions/ask" Icon="@Icons.Material.Filled.Create" Match="NavLinkMatch.All">Ask question</MudNavLink>
     <MudNavLink Href="/questions" Icon="@Icons.Material.Filled.List" Match="NavLinkMatch.All">Questions</MudNavLink>
     <MudNavLink Href="/resources" Icon="@Icons.Material.Filled.ContentCut" Match="NavLinkMatch.Prefix">Resources</MudNavLink>

diff --git a/API/ASSISTENTE.UI/Pages/Home.razor b/API/ASSISTENTE.UI/Pages/Home.razor
@@ -1,5 +1,148 @@
 @page "/"
 
-<PageTitle>Home</PageTitle>
+<PageTitle>Getting started</PageTitle>
+
+<MudGrid>
+    <MudItem Class="mb-8">
+        <MudText Typo="Typo.h2" GutterBottom="true">
+            ABOUT
+            <MudButton Target="_blank" Class="ml-3" Href="https://www.youtube.com/watch?v=5l5J5WqOT2w" Variant="Variant.Filled" Color="Color.Error" Size="Size.Small" StartIcon="@Icons.Custom.Brands.YouTube">Video explainer</MudButton>
+        </MudText>
+        <MudText Typo="Typo.body1">Every developer, and not just developers, understands how difficult it is to manage notes, bookmarks, and code snippets across various platforms. That's why assistente was created: <strong>to become a personal memory bank, facilitating quick and efficient storage and retrieval of key information</strong>. With assistente, you can say goodbye to wasting time searching for solutions and welcome seamless development.</MudText>
+    </MudItem>
+    <MudItem Class="mb-8">
+        <MudText Typo="Typo.h2" GutterBottom="true">WORKS WITH YOU RESOURCES</MudText>
+        <MudText Typo="Typo.body1">Assistente seamlessly integrates with your resources, such as notes and code snippets.</MudText>
+        <MudGrid Class="mt-4">
+            <MudItem xs="12" sm="6" md="3">
+                <MudCard Elevation="25" Class="rounded-lg pb-4">
+                    <MudCardHeader>
+                        <CardHeaderContent>
+                            <MudText Typo="Typo.h5" Align="Align.Center">Notes</MudText>
+                        </CardHeaderContent>
+                    </MudCardHeader>
+                    <MudCardContent>
+                        <MudList Class="mx-auto" Style="min-height: 220px;">
+                            <MudListItem Icon="@Icons.Material.Filled.Info">
+                                Assistente can learn from your notes and use them to answer your questions. (currently only markdown is supported)
+                            </MudListItem>
+                        </MudList>
+                    </MudCardContent>
+                    <MudCardActions Class="d-flex justify-center">
+                        <MudButton Href="resources" Variant="Variant.Filled" Color="Color.Primary" Size="Size.Large" StartIcon="@Icons.Material.Filled.Search">Go to resources</MudButton>
+                    </MudCardActions>
+                </MudCard>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="3">
+                <MudCard Elevation="25" Class="rounded-lg pb-4">
+                    <MudCardHeader>
+                        <CardHeaderContent>
+                            <MudText Typo="Typo.h5" Align="Align.Center">Code</MudText>
+                        </CardHeaderContent>
+                    </MudCardHeader>
+                    <MudCardContent>
+                        <MudList Class="mx-auto" Style="min-height: 220px;">
+                            <MudListItem Icon="@Icons.Material.Filled.Info">
+                                Assistente can learn code from your repositories and use them to help you. (currently only C# is supported)
+                            </MudListItem>
+                        </MudList>
+                    </MudCardContent>
+                    <MudCardActions Class="d-flex justify-center">
+                        <MudButton Href="resources" Variant="Variant.Filled" Color="Color.Primary" Size="Size.Large" StartIcon="@Icons.Material.Filled.Search">Go to resources</MudButton>
+                    </MudCardActions>
+                </MudCard>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="3">
+                <MudCard Elevation="25" Class="rounded-lg pb-4">
+                    <MudCardHeader>
+                        <CardHeaderContent>
+                            <MudText Typo="Typo.h5" Align="Align.Center">Bookmarks</MudText>
+                        </CardHeaderContent>
+                    </MudCardHeader>
+                    <MudCardContent>
+                        <MudList Class="mx-auto" Style="min-height: 220px;">
+                            <MudListItem Icon="@Icons.Material.Filled.Info">
+                                Based on your bookmarks assistente give you the most accurate link from your bookmarks.
+                            </MudListItem>
+                        </MudList>
+                    </MudCardContent>
+                    <MudCardActions Class="d-flex justify-center">
+                        <MudButton Disabled Variant="Variant.Filled" Color="Color.Primary" Size="Size.Large" StartIcon="@Icons.Material.Filled.Info">In-progress</MudButton>
+                    </MudCardActions>
+                </MudCard>
+            </MudItem>
+            <MudItem xs="12" sm="6" md="3">
+                <MudCard Elevation="25" Class="rounded-lg pb-4" >
+                    <MudCardHeader>
+                        <CardHeaderContent>
+                            <MudText Typo="Typo.h5" Align="Align.Center">E-mails</MudText>
+                        </CardHeaderContent>
+                    </MudCardHeader>
+                    <MudCardContent>
+                        <MudList Class="mx-auto" Style="min-height: 220px;">
+                            <MudListItem Icon="@Icons.Material.Filled.Info">
+                                Based on your emails, assistente remind you about necessary conversation
+                            </MudListItem>
+                        </MudList>
+                    </MudCardContent>
+                    <MudCardActions Class="d-flex justify-center">
+                        <MudButton Disabled Variant="Variant.Filled" Color="Color.Primary" Size="Size.Large" StartIcon="@Icons.Material.Filled.Info">In-progress</MudButton>
+                    </MudCardActions>
+                </MudCard>
+            </MudItem>
+        </MudGrid>
+    </MudItem>
+    <MudItem Class="mb-8">
+        <MudText Typo="Typo.h2" GutterBottom="true">
+            ANSWERING
+            <MudButton Class="ml-3" Href="questions/ask" Variant="Variant.Filled" Color="Color.Info" Size="Size.Small" StartIcon="@Icons.Material.Filled.CallToAction">Ask the assistente</MudButton>
+        </MudText>
+        <MudText Typo="Typo.body1">
+            After you have added <strong>your resources</strong>, you can ask the assistente questions. The assistente will use the resources you have added to <strong>answer your questions</strong>.
+            <MudAlert Severity="Severity.Info" Class="mt-8">
+                If you don't have any question, you can check <MudLink Href="questions">questions asked</MudLink> by other users.
+            </MudAlert>
+        </MudText>
+    </MudItem>
+    <MudItem Class="mb-8">
+        <MudText Typo="Typo.h2" GutterBottom="true">
+            PROCESS OF ANSWERING
+        </MudText>
+        <MudTimeline TimelineOrientation="TimelineOrientation.Horizontal" TimelinePosition="TimelinePosition.Top">
+            <MudTimelineItem Color="Color.Info" Variant="Variant.Filled">
+                <ItemContent>
+                    <MudAlert Severity="Severity.Success">Ask question</MudAlert>
+                </ItemContent>
+            </MudTimelineItem>
+            <MudTimelineItem Color="Color.Info" Variant="Variant.Filled">
+                <ItemContent>
+                    <MudAlert Severity="Severity.Info">Detect context (code or note)</MudAlert>
+                </ItemContent>
+            </MudTimelineItem>
+            <MudTimelineItem Color="Color.Info" Variant="Variant.Filled">
+                <ItemContent>
+                    <MudAlert Severity="Severity.Info">Find resources</MudAlert>
+                </ItemContent>
+            </MudTimelineItem>
+            <MudTimelineItem Color="Color.Info" Variant="Variant.Filled">
+                <ItemContent>
+                    <MudAlert Severity="Severity.Info">Create prompt</MudAlert>
+                </ItemContent>
+            </MudTimelineItem>
+            <MudTimelineItem Color="Color.Success" Variant="Variant.Filled">
+                <ItemContent>
+                    <MudAlert Severity="Severity.Success">Send answer to client</MudAlert>
+                </ItemContent>
+            </MudTimelineItem>
+        </MudTimeline>
+    </MudItem>
+    <MudItem Class="mb-8">
+        <MudText Typo="Typo.h2" GutterBottom="true">
+            CONFIGURATION
+        </MudText>
+        <MudText Typo="Typo.body1">
+            Instructions how to configure assistente on your own: <MudLink Href="https://github.com/jarmatys/DEV_ASSISTENTE?tab=readme-ov-file#quick-start" Target="_blank">README</MudLink>.
+        </MudText>
+    </MudItem>
+</MudGrid>
 
-<h1>Home page!</h1>
diff --git a/API/ASSISTENTE.UI/Pages/Questions/Ask.razor b/API/ASSISTENTE.UI/Pages/Questions/Ask.razor
@@ -50,7 +50,7 @@ else
             <MudTextField
                 @bind-Value="_request.Question"
                 For="@(() => _request.Question)"
-                HelperText="Ask random question"
+                HelperText="assistente is curent in preview version, so answers may not be accurate."
                 Variant="Variant.Outlined"
                 T="string"
                 Label="Question"

diff --git a/API/ASSISTENTE.UI/Pages/Resources/List.razor b/API/ASSISTENTE.UI/Pages/Resources/List.razor
@@ -20,7 +20,7 @@
 
     <HeaderContent>
         <MudTh>Title</MudTh>
-        <MudTh>Type</MudTh>
+        <MudTh>Context</MudTh>
         <MudTh>Actions</MudTh>
     </HeaderContent>
     <RowTemplate>