Merge branch 'master' into 7619-reports-responsive-toolbar

chatapi/README.md

@@ -1,23 +1,12 @@
 ## Couchdb Notes
 
-Ensure you have set the following configs in the `configurations` database in couchdb:
+Ensure you have set the chatapi configs via the manager -> AI Configurations or in the `configurations` database in couchdb:
+
+For model choices view:
+  Openai: https://platform.openai.com/docs/models
+  Perplexity: https://docs.perplexity.ai/guides/model-cards
+  Gemini: https://deepmind.google/technologies/gemini/
 
-  ```
-    "keys": {
-      "openai": "sk-mm",
-      "perplexity": "pplx-21",
-      "gemini": "AIza"
-    },
-    "models": {
-      "openai": "gpt-3.5-turbo",
-      "perplexity": "llama-3-sonar-small-32k-online",
-      "gemini": "gemini-pro"
-    },
-    "assistant": {
-      "name": "Planet Context",
-      "instructions": "You are a brainstorming manager for Open Learning Exchange (OLE) - https://ole.org/, you have specialised knowledge in Planet(web app) and myPlanet(mobile app) applications developed by OLE. You are designed to generate innovative ideas and provide suggestions and help the community members so as to ensure OLE's mission of empowering communities. Emphasize on terms like 'learning,' 'learner,' 'coach,' 'leader,' 'community,' 'power,' 'team,' and 'enterprises,' and avoids overly technical jargon. You are to embody OLE's ethos of self-reliance, mentoring, and community leadership, steering clear of concepts that contradict these values. Communicates in a formal tone, treating users with respect and professionalism, and maintaining a supportive, solution-oriented approach. Ask for clarifications when necessary to ensure contributions are accurate and relevant, and always encourages community-focused, empowering brainstorming."
-    }
-  ```
 
 Note: This applies for both production and development environments.
 
@@ -80,7 +69,7 @@ In the production environment these configs are set in the `planet.yml` file.
   - **context**: string(optional) -> The text context you would like to pre-load the AI Assistant   with
   - **aiProvider**: Object(required)
     - **name**: string(required) -> Name of the API provider to choose from i.e openai, perplexity or gemini.
-    - **model**: string(optional) -> Name of the specific provider model to use. Defaults to gpt-3.5-turbo for _openai_, llama-3-sonar-small-32k-online	for _peplexity_ and gemini-pro for _google gemini_
+    - **model**: string(optional) -> Name of the specific provider model to use.
   - **_id**: couchdb document id
   - **_rev**: couchdb revision id
   The couchdb id and rev are optional fields(only optional when starting a new chat), however to update an existing chat the id and rev (required) be provided.

chatapi/src/config/ai-providers.config.ts

@@ -42,9 +42,9 @@ const initialize = async () => {
     };
 
     models = {
-      'openai': { 'ai': keys.openai, 'defaultModel': doc?.models.openai || 'gpt-3.5-turbo' },
-      'perplexity': { 'ai': keys.perplexity, 'defaultModel': doc?.models.perplexity || 'llama-3-sonar-small-32k-online' },
-      'gemini': { 'ai': keys.gemini, 'defaultModel': doc?.models.gemini || 'gemini-pro' },
+      'openai': { 'ai': keys.openai, 'defaultModel': doc?.models.openai || '' },
+      'perplexity': { 'ai': keys.perplexity, 'defaultModel': doc?.models.perplexity || '' },
+      'gemini': { 'ai': keys.gemini, 'defaultModel': doc?.models.gemini || '' },
     };
 
     assistant = {

chatapi/src/utils/chat-helpers.utils.ts

@@ -155,7 +155,7 @@ export async function aiChatNonStream(
 
       return await retrieveResponse(thread.id);
     } catch (error) {
-      return `Error processing request ${error}`;
+      throw new Error(`Error processing request ${error}`);
     }
   }
 

src/app/community/community.component.html

@@ -8,7 +8,12 @@ <h3 style="text-align: right; margin-right: 0.5rem;">
               <button mat-stroked-button (click)="openAddMessageDialog()" *ngIf="showNewsButton" i18n>New Voice</button>
             </ng-container>
           </h3>
-          <planet-news-list [items]="news" [shareTarget]="shareTarget" (viewChange)="toggleShowButton($event)" [viewableId]="teamId"></planet-news-list>
+          <ng-container *ngIf="news?.length > 0; else noVoices">
+            <planet-news-list [items]="news" [shareTarget]="shareTarget" (viewChange)="toggleShowButton($event)" [viewableId]="teamId"></planet-news-list>
+          </ng-container>
+          <ng-template #noVoices>
+            <p i18n>No Voices available.</p>
+          </ng-template>
         </mat-tab>
         <mat-tab i18n-label label="Community Leaders">
           <div class="card-grid">
@@ -24,17 +29,23 @@ <h3 style="text-align: right; margin-right: 0.5rem;">
         </mat-tab>
         <mat-tab i18n-label label="Services">
           <planet-markdown *ngIf="team.description" [content]="team.description || ''"></planet-markdown>
+          <p *ngIf="!team.description" i18n>No description available.</p>
           <ng-container *ngIf="!planetCode">
             <button *planetAuthorizedRoles="''" (click)="openDescriptionDialog()" mat-stroked-button i18n>
               { servicesDescriptionLabel, select, Edit {Edit} Add {Add}} { configuration.planetType, select, community {Community} nation {Nation} center {Earth}} Description
             </button>
           </ng-container>
-          <mat-nav-list>
-            <mat-list-item *ngFor="let link of links" [routerLink]="(link.teamType === 'sync' || !planetCode) ? link.route : []" i18n-matTooltip [matTooltip]="(link.teamType === 'sync' || !planetCode) ? '' : link.title + ' is only available on ' + configuration.name" [disableRipple]="link.teamType === 'local' && planetCode">
-              <span matLine>{{link.title}}</span>
-              <button *ngIf="deleteMode" mat-icon-button color="warn" (click)="openDeleteLinkDialog(link); $event.stopPropagation()"><mat-icon>delete</mat-icon></button>
-            </mat-list-item>
-          </mat-nav-list>
+          <ng-container *ngIf="links?.length > 0; else noLinks">
+            <mat-nav-list>
+              <mat-list-item *ngFor="let link of links" [routerLink]="(link.teamType === 'sync' || !planetCode) ? link.route : []" i18n-matTooltip [matTooltip]="(link.teamType === 'sync' || !planetCode) ? '' : link.title + ' is only available on ' + configuration.name" [disableRipple]="link.teamType === 'local' && planetCode">
+                <span matLine>{{link.title}}</span>
+                <button *ngIf="deleteMode" mat-icon-button color="warn" (click)="openDeleteLinkDialog(link); $event.stopPropagation()"><mat-icon>delete</mat-icon></button>
+              </mat-list-item>
+            </mat-nav-list>
+          </ng-container>
+          <ng-template #noLinks>
+            <p i18n>No links available.</p>
+          </ng-template>
           <ng-container *ngIf="!planetCode">
             <div *planetAuthorizedRoles="''" class="action-buttons">
               <button (click)="openAddLinkDialog()" mat-stroked-button i18n>Add Link</button>

src/app/configuration/configuration.component.ts

@@ -236,9 +236,9 @@ export class ConfigurationComponent implements OnInit {
         gemini: ''
       },
       models: {
-        openai: 'gpt-3.5-turbo',
-        perplexity: 'llama-3-sonar-small-32k-online',
-        gemini: 'gemini-pro'
+        openai: '',
+        perplexity: '',
+        gemini: ''
       },
       assistant: {
         name: 'Planet Context',

src/app/manager-dashboard/manager-aiservices.component.html

@@ -73,5 +73,7 @@
     </mat-card-content>
   </mat-card>
 
-  <button [planetSubmit]="spinnerOn" mat-raised-button color="primary" (click)="saveConfig()">Update Configuration</button>
+  <div class="update-button-container">
+    <button [planetSubmit]="spinnerOn" mat-raised-button color="primary" (click)="saveConfig()">Update Configuration</button>
+  </div>
 </div>

src/app/manager-dashboard/manager-aiservices.component.scss

@@ -1,3 +1,5 @@
+@import "../variables.scss";
+
 .container {
   padding: 20px;
   display: flex;
@@ -15,6 +17,8 @@
   display: grid;
   grid-template-columns: 1.5fr 4fr;
   width: 100%;
+  align-items: baseline;
+  gap: 20px;
 }
 
 .instructions {
@@ -24,3 +28,92 @@
   line-height: 1.5;
 }
 
+.update-button-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 20px;
+}
+
+.update-button-container button {
+  width: auto;
+  margin-left: 0;
+}
+
+/* Targeting tablet screens*/
+@media (max-width: $screen-md) {
+  .container {
+    padding: 15px;
+  }
+
+  .card {
+    width: 100%;
+    margin: 0;
+  }
+
+  .list-item-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 10px;
+  }
+
+  .list-item-content > span {
+    flex-basis: 30%;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.5;
+  }
+
+  mat-form-field {
+    flex-basis: 70%;
+  }
+
+  input {
+    width: 100%;
+  }
+}
+
+/* Targeting mobile screens*/
+@media (max-width: $screen-sm) {
+  .container {
+    padding: 10px;
+  }
+
+  .card {
+    width: 100%;
+    margin: 0;
+  }
+
+  .list-item-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+    max-width: 70%;
+    overflow-x: hidden;
+  }
+
+  .list-item-content > span {
+    flex-basis: 35%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  mat-form-field {
+    flex-basis: 80%;
+    min-width: 0;
+  }
+
+  .update-button-container {
+    justify-content: flex-start;
+  }
+
+  .update-button-container button {
+    width: auto;
+  }
+}

src/app/manager-dashboard/reports/reports.component.html

@@ -7,7 +7,7 @@
 </mat-toolbar>
 <div class="space-container">
   <mat-toolbar>
-    <mat-toolbar-row class="primary-color font-size-1">
+    <mat-toolbar-row class="primary-color font-size-1 toolbar-responsive">
       <span i18n>Summary of Connected Planets</span>
       <span class="toolbar-fill"></span>
       <a mat-raised-button color="accent" class="margin-lr-10" [routerLink]="['detail']" i18n>Report Detail</a>

src/app/manager-dashboard/reports/reports.component.ts

@@ -15,7 +15,8 @@ import { takeUntil, switchMap } from 'rxjs/operators';
     mat-panel-title {
       align-items: center;
     }
-  ` ]
+  ` ],
+  styleUrls: ['./reports.components.scss']
 })
 export class ReportsComponent implements OnInit, OnDestroy {
 

src/app/manager-dashboard/reports/reports.components.scss

@@ -0,0 +1,15 @@
+@import '../../variables';
+
+@media (max-width: $screen-sm) {
+  .toolbar-responsive {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    height: auto;
+  }
+
+	.margin-lr-10 {
+		margin: 10px 0
+	}
+}

src/app/notifications/notifications.component.html

@@ -1,7 +1,9 @@
 <div class="space-container">
-  <mat-toolbar class="primary-color font-size-1">
-    <span i18n>Your Notifications</span>
-    <button mat-stroked-button [disabled]="!anyUnread" (click)="readAllNotification()" i18n class="margin-lr">Mark all as Read</button>
+  <mat-toolbar class="primary-color font-size-1 responsive-toolbar">
+    <div>
+      <span i18n>Your Notifications</span>
+      <button mat-stroked-button [disabled]="!anyUnread" (click)="readAllNotification()" i18n class="margin-lr">Mark all as Read</button>
+    </div>
     <span class="toolbar-fill"></span>
     <mat-form-field class="font-size-1 margin-lr-3">
       <mat-select i18n-placeholder placeholder="Notification Status" value="all" (selectionChange)="onFilterChange($event.value)">

src/app/notifications/notifications.component.scss

@@ -0,0 +1,22 @@
+@import '../variables';
+
+.responsive-toolbar button {
+	margin-left: 16px;
+}
+
+@media (max-width: $screen-sm) {
+	.responsive-toolbar {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    height: auto;
+		padding: 16px 16px 0px 16px;
+	}
+
+	.responsive-toolbar div, 
+  .responsive-toolbar mat-form-field, 
+  .responsive-toolbar button {
+    margin-bottom: 8px;
+  }
+}

src/app/notifications/notifications.component.ts

@@ -12,6 +12,7 @@ import { NotificationsService } from './notifications.service';
 
 @Component({
   templateUrl: './notifications.component.html',
+  styleUrls: ['./notifications.component.scss']
 })
 export class NotificationsComponent implements OnInit, AfterViewInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;

src/app/surveys/surveys.component.html

@@ -41,7 +41,7 @@
       </ng-container>
       <ng-container matColumnDef="name">
         <mat-header-cell *matHeaderCellDef mat-sort-header="name" i18n>Survey</mat-header-cell>
-        <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
+        <mat-cell *matCellDef="let element"><span>{{element.name}}</span></mat-cell>
       </ng-container>
       <ng-container matColumnDef="taken">
         <mat-header-cell *matHeaderCellDef mat-sort-header="taken" i18n>Number of Times Taken</mat-header-cell>
@@ -61,15 +61,17 @@
         <mat-header-cell *matHeaderCellDef i18n>Action</mat-header-cell>
         <mat-cell *matCellDef="let element">
           <ng-container *ngIf="!element.parent === true">
-            <button mat-raised-button color="primary" (click)="routeToEditSurvey('update', element._id)" i18n><mat-icon>edit</mat-icon> Edit Survey</button>
-            <button mat-raised-button color="primary" [disabled]="!element.questions.length" (click)="openSendSurveyDialog(element)" i18n><mat-icon>send</mat-icon> Send Survey</button>
+            <button mat-raised-button color="primary" (click)="routeToEditSurvey('update', element._id)" i18n><mat-icon>edit</mat-icon> Edit</button>
+            <button mat-raised-button color="primary" [disabled]="!element.questions.length" (click)="openSendSurveyDialog(element)" i18n><mat-icon>send</mat-icon> Send</button>
             <button mat-raised-button color="primary" [disabled]="!element.questions.length" (click)="recordSurvey(element)"
               i18n-matTooltip matTooltip="Record survey information from a person who is not a member of {{configuration.name}}" i18n>
-              <mat-icon>fiber_manual_record</mat-icon> Record Survey
+              <mat-icon>fiber_manual_record</mat-icon> Record
             </button>
           </ng-container>
           <div i18n-matTooltip matTooltip="There is no data to export" [matTooltipDisabled]="!!element.taken">
-            <button mat-raised-button color="primary" [disabled]="!element.taken" [matMenuTriggerFor]="exportMenu"  i18n><mat-icon>move_to_inbox</mat-icon> Export Survey</button>
+            <button mat-raised-button color="primary" [disabled]="!element.taken" [matMenuTriggerFor]="exportMenu" i18n>
+              <mat-icon>move_to_inbox</mat-icon> Export
+            </button>
             <mat-menu #exportMenu="matMenu">
               <button mat-menu-item (click)="exportCSV(element)" i18n>Excel (CSV)</button>
               <button mat-menu-item (click)="exportPdf(element)" i18n>Print (PDF)</button>