Skip to content

Commit

Permalink
theme
Browse files Browse the repository at this point in the history
  • Loading branch information
harshilp24 committed Dec 20, 2024
1 parent bac6523 commit e787710
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 5 deletions.
8 changes: 5 additions & 3 deletions website/docs/AI-assistants/appsmith-ai.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ tags={[



This page provides information on creating queries with Appsmith AI, which allows you to configure applications with advanced AI features such as text generation, image classification, and sentiment analysis without the need for any API keys or datasource authentication.
This page provides information on creating queries with Appsmith AI (available in AI Assistant Apps), which allows you to configure applications with advanced AI features such as chat assistants, text generation, image classification, and sentiment analysis without the need for any API keys or datasource authentication.

:::note Data, Privacy and Security
Appsmith is committed to providing safe and responsible access to AI capabilities. Your prompts, outputs, embeddings, and data are not shared with other users and are never utilized to fine-tune models.
Expand Down Expand Up @@ -70,7 +70,7 @@ The following section is a reference guide that provides a description of the av
### AI Chat Assistant


The AI Chat Assistant allows you to interact with AI models using the [AI Chat Widget](/AI-assistants/reference/AIChat). It enables users to ask questions and receive responses directly within the chat interface. This command works only with the AI Chat Widget.
The AI Chat Assistant command allows you to interact with AI models using the [AI Chat Widget](/AI-assistants/reference/AIChat). Users can input queries and receive AI-generated responses directly within the chat interface, without the need to bind or pass additional data.



Expand All @@ -97,7 +97,9 @@ The System Instructions property enables you to define specific behaviors and gu



Allows you to connect to various data sources or upload files to enhance AI capabilities. Uploaded files or connected data can be referenced as citations in the Chat widget. You can upload multiple files, and each file becomes available for use in interactions. Files can be removed or resynced as needed.

Allows you to connect to various datasources or upload files to provide additional context and enhance AI capabilities. Connected data or uploaded files can be referenced as citations in the AI Chat Widget, ensuring responses are backed by relevant information. You can resync, remove, or update uploaded files to ensure the AI Chat Assistant.


*Available Options:*

Expand Down
3 changes: 2 additions & 1 deletion website/docs/AI-assistants/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ Appsmith AI Assistants allow you to build custom AI-driven assistants that integ

- **LLM Integration:** You can choose from various large language models (LLMs) such as OpenAI, Anthropic, and others. Appsmith provides full control over API keys and model configurations, allowing you to tailor the AI assistant to your specific needs.

- **Iterate Faster with Auto Layout:** You can organize and rearrange your UI elements by dragging and dropping large and small blocks in one go. It automatically adjusts the layout to fit different screen sizes, eliminating the need for manual media queries.
- **Responsive Layout:** You can adjusts the UI to fit any viewport, eliminating the need for complex media queries or breakpoint management, ensuring a flawless experience across devices.


## Getting started

Expand Down
2 changes: 1 addition & 1 deletion website/docs/AI-assistants/reference/ComboBox.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ These properties allow you to configure the options and data displayed to users.

Specifies the behavior of the dropdown in the layout. You can choose between two modes:

- **Select**: A basic dropdown without search, ideal for situations where the number of options is small and easily visible to the user. See [ComboBox widget](/AI-assistants/reference/select).
- **Select**: A basic dropdown without search, ideal for situations where the number of options is small and easily visible to the user. See [Select widget](/AI-assistants/reference/select).
- **Combobox**: A dropdown with search functionality, designed for scenarios where the dataset is large, allowing users to quickly filter and select the desired option.

</dd>
Expand Down
82 changes: 82 additions & 0 deletions website/docs/AI-assistants/reference/app-theming.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
---
title: Theme
hide_title: true
toc_max_heading_level: 2
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<!-- vale off -->

<div className="tag-wrapper">
<h1>Theme (AI Assistant)</h1>

<Tags
tags={[
{ name: "Business", link: "https://www.appsmith.com/pricing", additionalClass: "business" }
]}
/>


</div>

<!-- vale on -->


This page provides information on app theme settings (available on Appsmith apps), which allows you to customize the appearance of your app. You can update widget colors, change font styles, and adjust border/shadow effects.

<ZoomImage
src="/img/ai-theme.gif"
alt=""
caption=""
/>

### Color
The Color settings allow you to customize the visual style of your app by adjusting the overall color scheme. These properties help create a consistent and branded look across your app by defining the primary and accent colors.

#### Theme
Choose between Light and Dark themes to adjust the overall color scheme of your app. The Light theme offers a brighter design with lighter backgrounds and darker text, while the Dark theme provides a darker background with white text for a more modern, contrasting look.

#### Accent Color
This property allows you to set the accent color for your app. You can choose from the predefined color options or input a custom hex code to match your branding. The accent color is applied to key elements like buttons, links, and highlights, creating a unified theme throughout your app.


### Dimension
The Dimension settings allow you to control the spacing, sizing, and corner rounding of your app’s elements, helping you fine-tune the layout for better user experience and design consistency.

#### Density
This property controls the spacing between elements in your app:

- **Tight**: Reduces spacing between elements for a compact, more dense layout.
- **Regular**: The default setting, providing standard spacing for a balanced layout.
- **Loose**: Increases spacing between elements for a spacious, open layout.

#### Sizing
Adjust the size of elements throughout your app using the following options:

- **Small**: Reduces the size of text and widgets for a more minimalistic and compact design.
- **Regular**: The default size setting, offering a standard layout.
- **Big**: Increases the size of text and widgets for a more prominent, easy-to-read design.




### Corner
The Corner settings allow you to control the roundness of widget corners, providing a more polished and modern look:

- **Sharp**: No rounding, maintaining sharp corners for a more angular, clean design.
- **Medium**: Slightly rounded corners for a softer, yet still defined look.
- **Rounded**: Applies fully rounded corners to widgets, giving them a smooth and modern look that improves the overall visual design of your app.

### Layout

The Layout properties allow you to control the overall structure and width of your app, ensuring it adapts to different screen sizes and provides a consistent user experience across devices.

#### Max App Width

This property lets you define the maximum width of your app layout, helping you control how your app appears on larger screens. You can choose from the following options:

- **Unlimited**: The app stretches to fill the entire screen width.
- **Large**: A wider layout, ideal for displaying more content.
- **Medium**: A balanced width, providing a good fit for most use cases.

1 change: 1 addition & 0 deletions website/sidebars.js
Original file line number Diff line number Diff line change
Expand Up @@ -874,6 +874,7 @@ const sidebars = {

],
},
'AI-assistants/reference/app-theming',
'AI-assistants/appsmith-ai',
],
}, //Reference End
Expand Down
Binary file added website/static/img/ai-theme.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e787710

Please sign in to comment.